Focus on input search when changing visualizations

public/app/features/dashboard-scene/panel-edit/PanelVizTypePicker.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { debounce } from 'lodash';
-import { useCallback, useId, useMemo, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useState } from 'react';
 import { useSessionStorage } from 'react-use';
 
 import { GrafanaTheme2, PanelData } from '@grafana/data';
@@ -45,6 +45,13 @@ export function PanelVizTypePicker({ panel, data, onChange, onClose, showBackBut
   const styles = useStyles2(getStyles);
   const panelModel = useMemo(() => new PanelModelCompatibilityWrapper(panel), [panel]);
   const filterId = useId();
+  const [searchInputRef, setSearchInputRef] = useState<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (searchInputRef) {
+      searchInputRef.focus();
+    }
+  }, [searchInputRef]);
 
   /** SEARCH */
   const [searchQuery, setSearchQuery] = useState('');
@@ -124,6 +131,9 @@ export function PanelVizTypePicker({ panel, data, onChange, onClose, showBackBut
                   )}
                   <FilterInput
                     id={filterId}
+                    ref={(ref) => {
+                      setSearchInputRef(ref);
+                    }}
                     className={styles.filter}
                     value={searchQuery}
                     onChange={setSearchQuery}