diff --git a/public/app/features/dashboard-scene/panel-edit/PanelVizTypePicker.tsx b/public/app/features/dashboard-scene/panel-edit/PanelVizTypePicker.tsx index 86024c3769c..0a907aefb76 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelVizTypePicker.tsx +++ b/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(null); + + useEffect(() => { + if (searchInputRef) { + searchInputRef.focus(); + } + }, [searchInputRef]); /** SEARCH */ const [searchQuery, setSearchQuery] = useState(''); @@ -124,6 +131,9 @@ export function PanelVizTypePicker({ panel, data, onChange, onClose, showBackBut )} { + setSearchInputRef(ref); + }} className={styles.filter} value={searchQuery} onChange={setSearchQuery}