Vuetify: [Bug Report] Datatable Inline editor dialog changing model when sorting changes

[andywhite8]

Versions and Environment

Vuetify: 1.0.4
Vue: 2.5.13
Browsers: Chrome 64.0.3282.167
OS: Mac OS 10.13.1

Steps to reproduce

1. Sort table by last 'Iron' column
2. Click on the Iron cell on the bottom row
3. Press backspace a few times and as the table sorting changes, so does the input model and value without pressing cancel or save.

Expected Behavior

The best solution would probably be that the dialog textbox edits a cloned version of the original value so the table doesn't update until you've saved.

If it's possible to pause the sorting of the datatable, even if the value does update, then that would still be good.

It would also work if the table does get sorted while edited and the input and value does need to change, it cancels the last change rather than saves it.

Actual Behavior

The input keeps changing value and you end up editing lots of different rows without saving or clicking anything.

Reproduction Link

https://codepen.io/andywhite8/pen/zRQyrv

Other comments

Its easy to replicate this in a few ways, the sorting just needs to change while the editing dialog is open.

[GianPaoloBuffo]

Is there a workaround for this behaviour in the meantime?

[infintesimal]

I have posted a workaround at https://stackoverflow.com/questions/50504265/editing-values-in-datatable-with-sorting-active-sorts-table-on-input/52213594#52213594

related to jsfiddle
https://jsfiddle.net/Loh5kyzt/

This is obviously not a global solution. I had tried using the .stop and .prevent modifiers but that obvs didn't effect computed properties. I am currently not sure if there is a clean solution. If a modifier were introduced along the lines of .excludeReactivityFor([props]) maybe that would work but it also seems to undermine the very notion of reactivity.

[infintesimal]

@nekosaur, I find myself having mixed opinions on this:
I am not sure it is a bug from a code point of view (the behavior we observe is what is expected of a reactive framework).
I have no doubt that it is bug from a user experience point of view (no user would want a row of data to seemingly disappear just because a sort is applied all the time to the column that is being edited).

Maybe from a design point of view, reactivity that would change the visibility or placement of an input type of element is placed through a two stage process? Stage 1 would queue the changes, Stage 2 would optionally propagate them. That way a coder could provide directions (e.g. proceed to stage 2, avoid stage 2, sidestep a handler after stage 1 etc)?

[infintesimal]

I didnt pay close attention when first responding here. I thought it was Vue in general. My workaround for Vue in general works, no doubt, I am not sure if it is relevant to Vuetify however.

[Zaxist]

Hi, Just checking up on this issue, is a solution still being worked on?

I'm looking to work around this behaviour, is there currently some way to disable sorting for the active column but retain data position when an edit dialog has been opened or something similar?

[fbrbovic]

Any updates on this issue? seems like it was forgotten

[nekosaur]

It has not been forgotten. But since data-table is getting a rewrite for 2.0, nothing will likely happen to the inline dialog before then.

[fbrbovic]

@nekosaur Ouch v2.0 it's going to be a while... tx for the update

[fbrbovic]

Here is another workaround for anyone else who might be waiting for v2.0 release
https://codepen.io/fbrbovic/pen/GPBRBr

            <v-edit-dialog
              :return-value.sync="props.item._iron"
              large
              lazy
              persistent
              @cancel="cancel"
              @save="$set(props.item, 'iron', props.item._iron); save();"
              @open="$set(props.item, '_iron', props.item.iron); open(); "
              @close="close"
            >
              <div>{{ props.item.iron }}</div>
              <div slot="input" class="mt-3 title">Update Iron</div>
              <v-text-field
                slot="input"
                v-model="props.item._iron"
                :rules="[max25chars]"
                label="Edit"
                single-line
                counter
                autofocus
              ></v-text-field>
            </v-edit-dialog>

It's a switcharoo with properties, using @open and @save events on v-edit-dialog
So on @open we assign existing value of iron property to temporary _iron then on @save we restore that back to iron. This way during editing sorting is not affected.

[Ansaal]

thank you @fbrbovic. I was having problems with this for a while now.

[LFishi]

To me, this problem still exists in v2.0.15 and tbh I want to avoid another big workaround.
I even tried v-model.lazy="item.someprop" and hoped, the sort algorithm will only fire after an "change" event but even that did not work for me.

[johnleider]

This component will be going away for v3. There will be an upgrade path to the same functionality.

If you have any additional questions, please reach out to us in our Discord community.