diff --git a/public/app/features/dashboard/panel_editor/VisualizationTab.tsx b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx index 8a904961a4f..4ce948caaaa 100644 --- a/public/app/features/dashboard/panel_editor/VisualizationTab.tsx +++ b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx @@ -14,8 +14,8 @@ import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp'; import { FadeIn } from 'app/core/components/Animations/FadeIn'; // Types -import { PanelModel } from '../state/PanelModel'; -import { DashboardModel } from '../state/DashboardModel'; +import { PanelModel } from '../state'; +import { DashboardModel } from '../state'; import { PanelPlugin } from 'app/types/plugins'; import { FilterInput } from 'app/core/components/FilterInput/FilterInput'; @@ -33,6 +33,7 @@ interface State { isVizPickerOpen: boolean; searchQuery: string; scrollTop: number; + hasBeenFocused: boolean; } export class VisualizationTab extends PureComponent { @@ -45,6 +46,7 @@ export class VisualizationTab extends PureComponent { this.state = { isVizPickerOpen: this.props.urlOpenVizPicker, + hasBeenFocused: false, searchQuery: '', scrollTop: 0, }; @@ -171,11 +173,20 @@ export class VisualizationTab extends PureComponent { }); }; + setSearchInputRef = (element: HTMLInputElement) => { + if (!this.state.hasBeenFocused) { + if (element) { + element.focus(); + } + } + this.setState({ hasBeenFocused: true }); + }; + renderToolbar = (): JSX.Element => { const { plugin } = this.props; - const { searchQuery } = this.state; + const { isVizPickerOpen, searchQuery } = this.state; - if (this.state.isVizPickerOpen) { + if (isVizPickerOpen) { return ( <> { placeholder="" onChange={this.onSearchQueryChange} value={searchQuery} - ref={elem => elem && elem.focus()} + ref={element => this.setSearchInputRef(element)} />