Cell edit improvements

primefaces · Jul 4, 2020 · 9ba8911 · 9ba8911
1 parent 25ec783
commit 9ba8911
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 14 deletions.
diff --git a/src/components/datatable/BodyCell.vue b/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: {

diff --git a/src/components/datatable/DataTable.vue b/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 {

diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
@@ -1116,7 +1116,7 @@ export default {
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&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="brand" header="Brand"&gt;

diff --git a/src/views/datatable/DataTableEditDemo.vue b/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;