[bug? (see first comment)] q-popup-edit giving me problems in just one case.

[rconstantine]

I had a different question about this a month ago which ended up fixing itself. This time, what I’m seeing is that for all columns for which the below code gets applied, they work fine except for one. I can’t figure out what makes that one column different. What I am seeing is this:

1. click into the field so the popup pops up
2. modify the value in any way (type more characters, or delete characters, or mouse-select some or all characters and then type)
3. the popup closes
4. depending on HOW FAST you typed, you will get one or more of the characters you typed to show, but never more than a few
5. this also moves the row in the table based on the table’s sorting characteristics
6. you can then reopen the popup and attempt to enter more characters
7. steps 3-6 repeat until you’re done

Note that one other editable field determines sort, but the popup doesn’t close while I’m typing in it. So I don’t think whether it is a sort field is the problem.

<span
              v-else
              :class="mousePointer(props.row.new, col.name)"
            >
              {{ props.row[col.field] !== '' ? props.row[col.field] : 'null' }}
              <q-popup-edit v-model="props.row[col.name]" v-if="props.row.new !== null && editAllowed(col.name)" @save="saveChange(props.row)">
                <template v-slot="{ initialValue, value, emitValue, validate, set, cancel }">
                  <q-input v-model="props.row[col.name]" dense autofocus counter>
                    <template v-slot:prepend>
                      <q-icon name="edit" />
                    </template>
                    <template v-slot:after>
                      <q-btn flat dense color="negative" icon="cancel" @click.stop="cancel" />
                      <q-btn flat dense color="positive" icon="check_circle" @click.stop="set" />
                    </template>
                  </q-input>
                </template>
              </q-popup-edit>
            </span>

Maybe I just need to update to the latest quasar version. I’m still on 1.1.4 due to how large our application is and how many changes will be needed due to breaking changes since that version. Haven’t had time yet.

But has anyone seen something like this?

[rconstantine]

I think I can show what is happening.

1. Go here: https://quasar.dev/vue-components/table#Popup-editing
2. Then sort the table by the first column.
3. Next, edit the Cupcake entry so the popup opens
4. Place your cursor at the front of the word, then delete the first letter, which should leave the word “upcake”
5. the popup changes the text to “Donut”!!! Huh?
6. if you close this, Cupcake is unchanged, of course

So while not quite the same issue as mine, I’m confident they have the same cause.
BTW, you can still edit the other columns.

[rconstantine]

I see this may have been reported already here: https://github.com/quasarframework/quasar/issues/6860

BUT, it seems to me this should work out of the box as sorting is a common thing to do. I’ll give the suggested workaround a try, but still. It should just work.