diff --git a/src/utils/components/ListPageFilter/AutocompleteInput.tsx b/src/utils/components/ListPageFilter/AutocompleteInput.tsx index 34e153fcf..5f791e1f5 100644 --- a/src/utils/components/ListPageFilter/AutocompleteInput.tsx +++ b/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 = ({ }) => { const [suggestions, setSuggestions] = useState(); const [visible, setVisible] = useState(true); + const inputRef = useRef(); const processedData = useMemo(() => Array.from(labelParser(data)), [data]); @@ -47,9 +48,36 @@ const AutocompleteInput: FC = ({ 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 (
- + {visible && (
= (props) => { +const SearchFilter = forwardRef((props, ref) => { const { className, placeholder, ...otherInputProps } = props; + const defaultRef = useRef(); + + 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 (
= (props) => { className={classNames('co-text-filter', className)} data-test-id="item-filter" placeholder={placeholder} + ref={inputRef} tabIndex={0} type="text" /> + + / +
); -}; +}); export default SearchFilter;