#3632 - issue fix

api-generator/components/column.js

@@ -125,6 +125,12 @@ const ColumnProps = [
         default: 'true',
         description: 'When enabled, a button is displayed to add more rules.'
     },
+    {
+        name: 'autoFocus',
+        type: 'boolean',
+        default: 'true',
+        description: 'When enabled, filter opens and the first element will focus.'
+    },
     {
         name: 'filterMatchModeOptions',
         type: 'array',

components/column/Column.d.ts

@@ -152,6 +152,11 @@ export interface ColumnProps {
      * Default value is true.
      */
     showAddButton?: boolean | undefined;
+    /**
+     * When enabled, filter opens and the first element will focus.
+     * Default value is true.
+     */
+    autoFocus?: boolean | undefined;
     /**
      * An array of label-value pairs to override the global match mode options.
      */

components/column/Column.vue

@@ -90,6 +90,10 @@ export default {
             type: Boolean,
             default: true
         },
+        autoFocus: {
+            type: Boolean,
+            default: true
+        },
         filterMatchModeOptions: {
             type: Array,
             default: null

components/datatable/ColumnFilter.vue

@@ -25,7 +25,7 @@
                     v-if="overlayVisible"
                     :ref="overlayRef"
                     :id="overlayId"
-                    v-focustrap="{ autoFocus: true }"
+                    v-focustrap="{ autoFocus: focustrapAutoFocus }"
                     :aria-modal="overlayVisible"
                     role="dialog"
                     :class="overlayClass"
@@ -145,6 +145,10 @@ export default {
             type: Boolean,
             default: true
         },
+        autoFocus: {
+            type: Boolean,
+            default: true
+        },
         showClearButton: {
             type: Boolean,
             default: true
@@ -199,7 +203,8 @@ export default {
         return {
             overlayVisible: false,
             defaultMatchMode: null,
-            defaultOperator: null
+            defaultOperator: null,
+            focustrapAutoFocus: this.autoFocus
         };
     },
     overlay: null,

components/datatable/HeaderCell.vue

@@ -45,6 +45,7 @@
                 :showApplyButton="columnProp('showApplyButton')"
                 :showMatchModes="columnProp('showFilterMatchModes')"
                 :showAddButton="columnProp('showAddButton')"
+                :autoFocus="columnProp('autoFocus')"
                 :matchModeOptions="columnProp('filterMatchModeOptions')"
                 :maxConstraints="columnProp('maxConstraints')"
                 @operator-change="$emit('operator-change', $event)"

components/datatable/TableHeader.vue

@@ -65,6 +65,7 @@
                             :showApplyButton="columnProp(col, 'showApplyButton')"
                             :showMatchModes="columnProp(col, 'showFilterMatchModes')"
                             :showAddButton="columnProp(col, 'showAddButton')"
+                            :autoFocus="columnProp(col, 'autoFocus')"
                             :matchModeOptions="columnProp(col, 'filterMatchModeOptions')"
                             :maxConstraints="columnProp(col, 'maxConstraints')"
                             @operator-change="$emit('operator-change', $event)"

pages/datatable/DataTableDoc.vue

@@ -269,6 +269,12 @@ export default {
                             <td>true</td>
                             <td>When enabled, a button is displayed to add more rules.</td>
                         </tr>
+                        <tr>
+                            <td>autoFocus</td>
+                            <td>boolean</td>
+                            <td>true</td>
+                            <td>When enabled, filter opens and the first element will focus.</td>
+                        </tr>
                         <tr>
                             <td>filterMatchModeOptions</td>
                             <td>array</td>