QPopupEdit not emitting @save when the QInput is cleared.

[dsl101]

I’m struggling to get QPopupEdit to emit a @save when the QInput is clearable. Here’s an example: https://codepen.io/dsl101/pen/XWNRZYz?editors=1011

1. Click on one of the edit icons
2. The current value of editLabel changes and the popup opens
3. Click the ‘clear’ icon at the right of the QInput
4. Click the ‘Set’ button on the popup.

I would expect to see null printed in the console, but I don’t see anything. What am I doing wrong? Note you can get null into the console by changing the QInput value first (and clicking ‘Set’).

[dsl101]

Note this is the original code which doesn’t work:

<q-btn flat round dense icon="edit">
  <q-popup-edit v-model="editLabel" buttons @before-show="editLabel = label" @save="saveLabel">
    <q-input v-model="editLabel" clearable></q-input>
  </q-popup-edit>
</q-btn>

whereas this version does work:

<q-btn flat round dense icon="edit" @click="editLabel = label">
  <q-popup-edit v-model="editLabel" buttons @save="saveLabel">
    <q-input v-model="editLabel" clearable></q-input>
  </q-popup-edit>
</q-btn>

The significant difference is where editLabel is initialised. In the @before-show event the model is set, but apparently it is not set before the QPopupEdit initialValue has been copied from the model. This causes __hasChanged () to later return false when the model is cleared back to null.

[pdanpdan]

What you are doing is you modify the external model, so when you press on set button QPopupEdit sees that the value you want to set is the same as the current value and does nothing.

[dsl101]

I was wanting to use @before-show to set the ‘initial’ value. Then when clicking ‘Set’, the new (cleared) value would be null and cause an @save event. But it seems the initial value is stored before @before-show is triggered?

In any case, setting the model via the Qbtn surrounding the popup works OK.

I edited the code above to be clearer, and also updated the code pen with 2 versions (one that works and one that doesn’t). The only difference is where editLabel is set initially. In the QBtn @click works, in the QPopupEdit @before-show doesn’t.

[diadal]

if faced the same issue about was able to fix this you can check in my comment https://forum.quasar-framework.org/topic/7798/how-to-use-save-event-in-q-popup-edit/4