diff --git a/public/app/core/components/Select/DataSourcePicker.tsx b/public/app/core/components/Select/DataSourcePicker.tsx index d028682b215..f4cf7613042 100644 --- a/public/app/core/components/Select/DataSourcePicker.tsx +++ b/public/app/core/components/Select/DataSourcePicker.tsx @@ -1,9 +1,8 @@ // Libraries import React, { PureComponent } from 'react'; -import _ from 'lodash'; // Components -import { Select } from '@grafana/ui'; +import { Select, SelectOptionItem } from '@grafana/ui'; // Types import { DataSourceSelectItem } from '@grafana/ui/src/types'; @@ -14,26 +13,28 @@ export interface Props { current: DataSourceSelectItem; onBlur?: () => void; autoFocus?: boolean; + openMenuOnFocus?: boolean; } export class DataSourcePicker extends PureComponent { - static defaultProps = { + static defaultProps: Partial = { autoFocus: false, + openMenuOnFocus: false, }; searchInput: HTMLElement; - constructor(props) { + constructor(props: Props) { super(props); } - onChange = item => { + onChange = (item: SelectOptionItem) => { const ds = this.props.datasources.find(ds => ds.name === item.value); this.props.onChange(ds); }; render() { - const { datasources, current, autoFocus, onBlur } = this.props; + const { datasources, current, autoFocus, onBlur, openMenuOnFocus } = this.props; const options = datasources.map(ds => ({ value: ds.name, @@ -58,7 +59,7 @@ export class DataSourcePicker extends PureComponent { options={options} autoFocus={autoFocus} onBlur={onBlur} - openMenuOnFocus={true} + openMenuOnFocus={openMenuOnFocus} maxMenuHeight={500} placeholder="Select datasource" noOptionsMessage={() => 'No datasources found'} diff --git a/public/app/features/dashboard/panel_editor/QueriesTab.tsx b/public/app/features/dashboard/panel_editor/QueriesTab.tsx index 0553a61287c..b44b123d5b8 100644 --- a/public/app/features/dashboard/panel_editor/QueriesTab.tsx +++ b/public/app/features/dashboard/panel_editor/QueriesTab.tsx @@ -152,6 +152,7 @@ export class QueriesTab extends PureComponent { current={null} autoFocus={true} onBlur={this.onMixedPickerBlur} + openMenuOnFocus={true} /> ); }; diff --git a/public/app/features/explore/QueryField.tsx b/public/app/features/explore/QueryField.tsx index 2eae12d240d..dd453faf7dd 100644 --- a/public/app/features/explore/QueryField.tsx +++ b/public/app/features/explore/QueryField.tsx @@ -408,8 +408,6 @@ export class QueryField extends React.PureComponent {}; - onClickMenu = (item: CompletionItem) => { // Manually triggering change const change = this.applyTypeahead(this.state.value.change(), item); @@ -500,7 +498,6 @@ export class QueryField extends React.PureComponent