Cell edit improvements

src/components/datatable/BodyCell.vue

@@ -83,11 +83,10 @@ export default {
         this.children = this.$children;
     },
     updated() {
-        if (this.d_editing) {
-            let focusable = DomHandler.findSingle(this.$el, 'input');
-            if (focusable) {
-                focusable.focus();
-            }
+        let query = this.editMode === 'row' ? '[autofocus]' : 'input';
+        let focusable = DomHandler.findSingle(this.$el, query);
+        if (focusable && document.activeElement != focusable) {
+            focusable.focus();
         }
     },
     methods: {

src/components/datatable/DataTable.vue

@@ -1963,11 +1963,6 @@ export default {
     display: none;
 }
 
-/* Edit */
-.p-datatable .p-datatable-tbody > tr > td.p-cell-editing .p-component {
-    width: 100%;
-}
-
 .p-datatable .p-row-editor-init,
 .p-datatable .p-row-editor-save,
 .p-datatable .p-row-editor-cancel {

src/views/datatable/DataTableDoc.vue

@@ -1116,7 +1116,7 @@ export default {
     <Column field="vin" header="Vin"></Column>
     <Column field="year" header="Year">
         <template #editor="slotProps">
-            <InputText v-model="slotProps.data[slotProps.column.field]" />
+            <InputText v-model="slotProps.data[slotProps.column.field]" autofocus/>
         </template>
     </Column>
     <Column field="brand" header="Brand">

src/views/datatable/DataTableEditDemo.vue

@@ -9,7 +9,7 @@
 			</div>
 		</div>
 
-		<div class="content-section implementation">
+		<div class="content-section implementation p-fluid">
             <div class="card">
                 <h5>Basic Cell Editing</h5>
                 <p>Simple editors with v-model.</p>
@@ -62,7 +62,7 @@
                     @row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel">
                     <Column field="code" header="Code">
                         <template #editor="slotProps">
-                            <InputText v-model="slotProps.data[slotProps.column.field]" />
+                            <InputText v-model="slotProps.data[slotProps.column.field]" autofocus />
                         </template>
                     </Column>
                     <Column field="name" header="Name">
@@ -149,7 +149,7 @@
         @row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel"&gt;
         &lt;Column field="code" header="Code"&gt;
             &lt;template #editor="slotProps"&gt;
-                &lt;InputText v-model="slotProps.data[slotProps.column.field]" /&gt;
+                &lt;InputText v-model="slotProps.data[slotProps.column.field]" autofocus /&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
         &lt;Column field="name" header="Name"&gt;