CNV-32097: Add focus/blur action to the listpagefilter search input

src/utils/components/ListPageFilter/AutocompleteInput.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, FC, SetStateAction, useMemo, useState } from 'react';
+import React, { Dispatch, FC, SetStateAction, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 
 import { K8sResourceCommon } from '@openshift-console/dynamic-plugin-sdk';
@@ -28,6 +28,7 @@ const AutocompleteInput: FC<AutocompleteInputProps> = ({
 }) => {
   const [suggestions, setSuggestions] = useState<string[]>();
   const [visible, setVisible] = useState<boolean>(true);
+  const inputRef = useRef<HTMLInputElement>();
 
   const processedData = useMemo(() => Array.from(labelParser(data)), [data]);
 
@@ -47,9 +48,36 @@ const AutocompleteInput: FC<AutocompleteInputProps> = ({
     setSuggestions(filtered);
   };
 
+  useEffect(() => {
+    const inputElement = inputRef.current;
+
+    if (!inputElement) return;
+
+    const onFocus = () => {
+      setVisible(true);
+    };
+
+    const onBlur = () => {
+      setVisible(false);
+    };
+
+    inputElement.addEventListener('focus', onFocus);
+    inputElement.addEventListener('blur', onBlur);
+
+    return () => {
+      inputElement.removeEventListener('focus', onFocus);
+      inputElement.removeEventListener('blur', onBlur);
+    };
+  }, []);
+
   return (
     <div className="co-suggestion-box">
-      <SearchFilter onChange={handleInput} placeholder={placeholder} value={textValue} />
+      <SearchFilter
+        onChange={handleInput}
+        placeholder={placeholder}
+        ref={inputRef}
+        value={textValue}
+      />
       {visible && (
         <div
           className={classNames('co-suggestion-box__suggestions', {

src/utils/components/ListPageFilter/SearchFilter.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { forwardRef, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 
 import { TextInput, TextInputProps } from '@patternfly/react-core';
@@ -8,9 +8,30 @@ type SearchFilterProps = {
   placeholder: string;
 } & TextInputProps;
 
-const SearchFilter: FC<SearchFilterProps> = (props) => {
+const SearchFilter = forwardRef<HTMLInputElement, SearchFilterProps>((props, ref) => {
   const { className, placeholder, ...otherInputProps } = props;
 
+  const defaultRef = useRef<HTMLInputElement>();
+
+  const inputRef = ref || defaultRef;
+
+  useEffect(() => {
+    if (!inputRef || !('current' in inputRef) || !inputRef.current) return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === '/') {
+        inputRef.current.focus();
+        event.preventDefault();
+      }
+    };
+
+    document.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [inputRef]);
+
   return (
     <div className="has-feedback">
       <TextInput
@@ -19,11 +40,15 @@ const SearchFilter: FC<SearchFilterProps> = (props) => {
         className={classNames('co-text-filter', className)}
         data-test-id="item-filter"
         placeholder={placeholder}
+        ref={inputRef}
         tabIndex={0}
         type="text"
       />
+      <span className="co-text-filter-feedback">
+        <kbd className="co-kbd co-kbd__filter-input">/</kbd>
+      </span>
     </div>
   );
-};
+});
 
 export default SearchFilter;