fix: blur on drawer open

Author: astandrik

src/components/Search/Search.tsx

@@ -15,6 +15,7 @@ interface SearchProps {
     className?: string;
     debounce?: number;
     placeholder?: string;
+    inputRef?: React.RefObject<HTMLInputElement>;
 }
 
 export const Search = ({
@@ -24,6 +25,7 @@ export const Search = ({
     className,
     debounce = 200,
     placeholder,
+    inputRef,
 }: SearchProps) => {
     const [searchValue, setSearchValue] = React.useState<string>(value);
 
@@ -52,6 +54,7 @@ export const Search = ({
         <TextInput
             hasClear
             autoFocus
+            controlRef={inputRef}
             style={{width}}
             className={b(null, className)}
             placeholder={placeholder}

src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx

@@ -99,6 +99,14 @@ export const RunningQueriesData = ({
         [setSelectedRow],
     );
 
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    React.useEffect(() => {
+        if (isDrawerVisible) {
+            inputRef.current?.blur();
+        }
+    }, [isDrawerVisible]);
+
     return (
         <Drawer.ItemWrapper
             isDrawerVisible={isDrawerVisible}
@@ -117,6 +125,7 @@ export const RunningQueriesData = ({
                         onChange={handleTextSearchUpdate}
                         placeholder={i18n('filter.text.placeholder')}
                         className={b('search')}
+                        inputRef={inputRef}
                     />
                     <TableColumnSetup
                         popupWidth={200}

src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx

@@ -127,6 +127,14 @@ export const TopQueriesData = ({
         [setSelectedRow],
     );
 
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    React.useEffect(() => {
+        if (isDrawerVisible) {
+            inputRef.current?.blur();
+        }
+    }, [isDrawerVisible]);
+
     return (
         <Drawer.ItemWrapper
             isDrawerVisible={isDrawerVisible}
@@ -153,6 +161,7 @@ export const TopQueriesData = ({
                     />
                     <Search
                         value={filters.text}
+                        inputRef={inputRef}
                         onChange={handleTextSearchUpdate}
                         placeholder={i18n('filter.text.placeholder')}
                         className={b('search')}