DataTable : (row) editing + selection column - focus issues

[llange]

Hello,
vue-newbie here, so please bear with me if I am off-topic or plain wrong - which is very possible.

While implementing a row-level edit on a DataTable, I found some surprising behaviours when there is a selection first column before the InputText being edited:

• a) In such a configuration, when I press the rowEditor, the InputText is properly opening as expected, but it does not have focus. The focus is set on the selection column.

• b) Even when refocusing the InputText, there is another surprising behaviour (only when the edited field is not (yet) existing in the data object - field not present at all) :
  In that case, when you click of the rowEditor, the InputText is properly opening as expected (you need to put the focus manually on the InputText as just said before).
  Then when you click on the InputText to add some text, you can only press the first character, and then the focus is lost (in fact is again transferred to the selection column). You need to either press "Tab" or click again in the InputText.
  However this (strange) behaviour of focus loss does not seem to occur when the edited field is already existing in the data object (either with a value, or null).

Here is a test case:

1. Setup a brand new hello-world vue project ("core-js": "^3.6.4", "primeflex": "^1.1.0", "primeicons": "^2.0.0", "primevue": "^1.3.2", "vue": "^2.6.10")

2. Add the following to main.js:

import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
import InputText from 'primevue/inputtext'

import 'primevue/resources/themes/nova-light/theme.css'
import 'primevue/resources/primevue.min.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css'

Vue.component('DataTable', DataTable)
Vue.component('Column', Column)
Vue.component('InputText', InputText)

1. Replace the HelloWorld.vue content with:

<template>
    <div>
        <DataTable :value="cars" :selection.sync="selectedCars" dataKey="vin" editMode="row" :editingRows.sync="editingRows" @row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel">
            <Column selectionMode="multiple" headerStyle="width: 3em" />
            <Column field="vin" header="Vin" />
            <Column field="year" header="Year" />
            <Column field="brand" header="Brand" />
            <Column field="color" header="Color">
                <template #editor="slotProps">
                    <InputText v-model="slotProps.data[slotProps.column.field]" />
                </template>
            </Column>
            <Column :rowEditor="true"/>
        </DataTable>
    </div>
</template>

<script>
import Vue from 'vue'
export default {
  data () {
    return {
      filters: {},
      cars: [
        {"brand": "Bug occurring", "year": 2012, "vin": "dsad231ff"},
        {"brand": "OK (value set)", "year": 2011, "vin": "gwregre345", "color": "Orange"},
        {"brand": "OK (value null)", "year": 2005, "vin": "h354htr", "color": null},
        {"brand": "OK (value empty)", "year": 2003, "vin": "j6w54qgh", "color": ""}
      ],
      selectedCars: null,
      editingRows: []
    }
  },
  originalRows: {},
  methods: {
    onRowEditInit (event) {
      this.originalRows[event.index] = { ...this.cars[event.index] }
    },
    onRowEditCancel (event) {
      Vue.set(this.cars, event.index, this.originalRows[event.index])
    }
  }
}
</script>

<style>
</style>

1. Fire the project with yarn serve
2. In the DataTable that just displayed, click on the first edit icon on the right, on the first line.
3. Observe that the focus is on the first checkbox - not on the InputText as expected (strange behaviour (a))
4. Put the focus on the InputText (either with Tab or the mouse), then try to enter some text (more than 1 character). Observe that only the first character is entered in the InputText, and that the focus is again on the checkbox (strange behaviour (b))
5. While you're at it, check that the strange behaviour (b) does not occur on lines 2, 3 and 4, for which the "color" property is properly defined in the dataobject (while it's undefined for line 1)

May be behaviour (b) is by design, and I don't mind having to defined the properties on the object beforehand.

But I'm surprised by behaviour (a) for which I do not have satisfying a workaround, other than:

• removing the selection column
• or placing the selection column after the InputText

Any idea ?

[cagataycivici]

I've added some enhancements to editing which is likely to fix this one. Also row editing, add autofocus to the cell input editor so that it gets the first when the row goes in edit mode.

[yvzkr]

How can I post after edit done ?