Fix: Disables auto open datasource picker on focus (#16398)

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<Props> {
-  static defaultProps = {
+  static defaultProps: Partial<Props> = {
     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<Props> {
           options={options}
           autoFocus={autoFocus}
           onBlur={onBlur}
-          openMenuOnFocus={true}
+          openMenuOnFocus={openMenuOnFocus}
           maxMenuHeight={500}
           placeholder="Select datasource"
           noOptionsMessage={() => 'No datasources found'}

public/app/features/dashboard/panel_editor/QueriesTab.tsx

@@ -152,6 +152,7 @@ export class QueriesTab extends PureComponent<Props, State> {
         current={null}
         autoFocus={true}
         onBlur={this.onMixedPickerBlur}
+        openMenuOnFocus={true}
       />
     );
   };

public/app/features/explore/QueryField.tsx

@@ -408,8 +408,6 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
     }
   };
 
-  handleFocus = () => {};
-
   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<QueryFieldProps, QueryFieldS
             onBlur={this.handleBlur}
             onKeyDown={this.onKeyDown}
             onChange={this.onChange}
-            onFocus={this.handleFocus}
             onPaste={this.handlePaste}
             placeholder={this.props.placeholder}
             plugins={this.plugins}