fix: enable arrow key navigation when filter input is focused (#8012)

* fix: enable arrow key navigation when filter input is focused

* refactor: remove unused code

Author: navedqb

components/lib/multiselect/MultiSelect.js

@@ -382,6 +382,66 @@ export const MultiSelect = React.memo(
             setClicked(false);
         };
 
+        const onFilterKeyDown = (event) => {
+            switch (event.code) {
+                case 'ArrowUp':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    onArrowUpKey(event);
+                    break;
+
+                case 'ArrowDown':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    onArrowDownKey(event);
+
+                    break;
+
+                case 'NumpadEnter':
+                case 'Enter':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    onEnterKey(event);
+                    break;
+
+                case 'Home':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    onHomeKey(event);
+                    event.preventDefault();
+                    break;
+
+                case 'End':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    onEndKey(event);
+                    event.preventDefault();
+                    break;
+
+                case 'Escape':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    hide();
+                    break;
+
+                case 'Tab':
+                    onTabKey(event);
+                    break;
+            }
+        };
+
         const onSelectAll = (event) => {
             if (props.onSelectAll) {
                 props.onSelectAll(event);
@@ -1169,6 +1229,7 @@ export const MultiSelect = React.memo(
                         getOptionValue={getOptionValue}
                         updateModel={updateModel}
                         onFilterInputChange={onFilterInputChange}
+                        onFilterKeyDown={onFilterKeyDown}
                         resetFilter={resetFilter}
                         onCloseClick={onCloseClick}
                         onSelectAll={onSelectAll}

components/lib/multiselect/MultiSelectHeader.js

@@ -73,6 +73,7 @@ export const MultiSelectHeader = React.memo((props) => {
                         role="searchbox"
                         value={props.filterValue}
                         onChange={onFilter}
+                        onKeyDown={props.onFilterKeyDown}
                         className="p-multiselect-filter"
                         placeholder={props.filterPlaceholder}
                         pt={ptm('filterInput')}

components/lib/multiselect/MultiSelectPanel.js

@@ -69,6 +69,7 @@ export const MultiSelectPanel = React.memo(
                     getOptionValue={props.getOptionValue}
                     updateModel={props.updateModel}
                     onFilter={onFilterInputChange}
+                    onFilterKeyDown={props.onFilterKeyDown}
                     filterPlaceholder={props.filterPlaceholder}
                     onClose={props.onCloseClick}
                     showSelectAll={props.showSelectAll}