Fix #3655: ENTER key on menu filter input applies filter (#3660)

primefaces · Nov 16, 2022 · 8ec278a · 8ec278a
1 parent 6898d8f
commit 8ec278a
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/components/lib/datatable/ColumnFilter.js b/components/lib/datatable/ColumnFilter.js
@@ -197,6 +197,14 @@ export const ColumnFilter = React.memo((props) => {
         }
     };
 
+    const onInputKeydown = (event, _index) => {
+        if (event.key === 'Enter') {
+            if (!getColumnProp('showApplyButton') || props.display === 'menu') {
+                applyFilter();
+            }
+        }
+    };
+
     const onRowMatchModeChange = (matchMode) => {
         const filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
         let filters = { ...props.filters };
@@ -442,7 +450,15 @@ export const ColumnFilter = React.memo((props) => {
         return getColumnProp('filterElement') ? (
             ObjectUtils.getJSXElement(getColumnProp('filterElement'), { field, index, filterModel: model, value, filterApplyCallback, filterCallback })
         ) : (
-            <InputText type={getColumnProp('filterType')} value={value || ''} onChange={(e) => onInputChange(e, index)} className="p-column-filter" placeholder={getColumnProp('filterPlaceholder')} maxLength={getColumnProp('filterMaxLength')} />
+            <InputText
+                type={getColumnProp('filterType')}
+                value={value || ''}
+                onChange={(e) => onInputChange(e, index)}
+                onKeyDown={(e) => onInputKeydown(e, index)}
+                className="p-column-filter"
+                placeholder={getColumnProp('filterPlaceholder')}
+                maxLength={getColumnProp('filterMaxLength')}
+            />
         );
     };