[Bug Report] Editing a cell in a sorted v-data-table column with v-edit-dialog does not work

Environment

Vuetify Version: 2.2.25 Vue Version: 3.0.0-beta.4 Browsers: Chrome 81.0.4044.122 OS: Windows 10

Steps to reproduce

Step1: In the documentation, Sort column “Iron”, ascending or descending doesn’t matter Step2: Click on any cell in the sorted column to open the edit dialog Step3: Try to edit the value within the edit dialog

Expected Behavior

You can enter the new value and save it.

Actual Behavior

The v-model within the dialog is {{ props.item.iron }}, so the value item within the table is bound to the dialog text field.

Attempting to change the item’s value results in the table instantly updating the sorting, thus changing the position of the row you’re editing.

Reproduction Link

https://codepen.io/bblacc/pen/LYpWaRp?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fdata-tables%2F

Other comments

I’ve been able to fix this as follows, maybe this will help someone else ho faces this issue:

component.vue

        <template v-slot:item.Name="props">
        <v-edit-dialog
          :return-value.sync="props.item.Name"
          large
          persistent
          @save="save(props.item.Name')" // PASS PROP TO SAVE FUNCTION
          @cancel="cancel"
          @open="open"
        >
          <div>{{props.item.Name}}</div>
          <template v-slot:input>
            <v-text-field
              v-model="nameUpdate" // CHANGE V-MODEL
              :label="props.item.Name"
              single-line
              counter
              autofocus
            ></v-text-field>
          </template>
        </v-edit-dialog>
      </template>  

script

export default {

data() {
       return { 
            nameUpdate: "" //REGISTER V-MODEL
},
methods: {
   save(prop) {
   prop = this.nameUpdate // PASS VALUE FROM V-MODEL TO PROP
   }
}

}

[NicoAiko]

This should get more attention imo as this bug actually breaks a significant function…

[edgarasne]

Yes I came across it too a while ago. I think it’s quite confusing. What is the purpose of .sync modifier on return-value prop? I would expect input slot to have some local variable which would sync return value on save if modifier is set.

So it should look like:

<v-edit-dialog :return-value.sync="props.item.name">
    <template v-slot:input="value">
        <v-text-field v-model="value"></v-text-field>
    </template>
</v-edit-dialog>

Also I would like to see option like “lazy-sorting” which would sort rows only after user click. Since from user perspective most of the time expected behaviour is that after change rows stays the way they are just like excel and etc. And also it’s quite frustrating when you have to edit several rows and after first edit it goes to the last page.

Even though it seems like some minor features but because of this I tend to use v-simple-tables a lot more.