Re-Opening dialog doesn't update() inputs #2149
Comments
adosikas
changed the title
|
Oh wow, thanks for reporting this issue, @adosikas! Here is a reproduction without binding and without app storage: model = {'text': 'test'}
with ui.dialog() as dialog, ui.card():
input_ = ui.input(value=model['text'], on_change=lambda e: model.update(text=e.value))
ui.button('Edit', on_click=dialog.open)
ui.label().bind_text_from(input_, 'value')It looks like the problem is that the HTML input doesn't exist while the dialog is closed. Vue re-creates it when the dialog is opened, but somehow an outdated value is set. I wonder if we can reproduce the behavior with a plain Vue app... |
|
A plain Vue app works as expected: <html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button @click="showDialog = true">Edit</button>
<div v-if="showDialog" style="border: 1px solid black; padding: 10px">
<input id="inputText" v-model="text" />
<button @click="showDialog = false">Close</button>
</div>
<p>Entered Text: {{ text }}</p>
</div>
<script>
Vue.createApp({
data() {
return { text: "test", showDialog: false };
},
}).mount("#app");
</script>
</body>
</html> |
|
A Quasar app works as well: <html>
<head>
<link href="https://cdn.jsdelivr.net/npm/quasar@2.14.1/dist/quasar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="q-app">
<q-btn label="Edit" @click="showDialog = true"></q-btn>
<q-dialog v-model="showDialog">
<q-card>
<q-input v-model="text"></q-input>
<q-btn label="Close" @click="showDialog = false"></q-btn>
</q-card>
</q-dialog>
<div>Entered Text: {{ text }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.14.1/dist/quasar.umd.js"></script>
<script>
const app = Vue.createApp({
data() {
return { text: "test", showDialog: false };
},
});
app.use(Quasar);
app.mount("#q-app");
</script>
</body>
</html> |
|
The difference might be that NiceGUI doesn't use |
|
Good to see the problem here, I totally forgot to report this issue. My use case was also an edit button for some data that opened a dialog: first time user edits an initial value 11 to 22, next time when they click the edit button, they do not see 22 but 11 inside the dialog. My workaround was to create the dialog each time: from nicegui import ui
def create_dialog():
with ui.dialog(value=True) as dialog, ui.card():
ui.input(value=model['text'], on_change=lambda e: model.update(text=e.value))
model = {'text': 'test'}
ui.button('Edit', on_click=create_dialog)
ui.label().bind_text_from(model, 'text')
ui.run() |
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
Description
I am trying to "hide" some settings in a dialog, but whenever I reopen the dialog, the initial value from page load is reset, seeming ignoring binds.
But the bind actually works correctly, the input is just displaying it wrong.
The label changes as expected when I modify the input, but the input default value (either from the element or from the storage) is "restored" every time the dialog opens.
I can work around it by manually update all contained inputs when opening the dialog (before or after
.open()doesn't actually matter), but that hardly seems intentional.The text was updated successfully, but these errors were encountered: