IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Prevent search in VizPicker from stealing focus (#15802)

Browse Source 
Fixes #15569 focus issue in viz picker search
* added state to not set focus on search every render
* move to new component to handle focus
This commit is contained in:
Peter Holmberg 2019-03-06 13:07:08 +01:00 committed by Torkel Ödegaard
parent 72d5215c65
commit 4e57ead38d
2 changed files with 47 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
public/app/features/dashboard/panel_editor/VisualizationTab.tsx
View File

@ -14,10 +14,10 @@ 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';
import { VizPickerSearch } from './VizPickerSearch';
interface Props {
panel: PanelModel;
@ -33,18 +33,19 @@ interface State {
isVizPickerOpen: boolean;
searchQuery: string;
scrollTop: number;
hasBeenFocused: boolean;
}
export class VisualizationTab extends PureComponent<Props, State> {
element: HTMLElement;
angularOptions: AngularComponent;
searchInput: HTMLElement;
constructor(props) {
super(props);
this.state = {
isVizPickerOpen: this.props.urlOpenVizPicker,
hasBeenFocused: false,
searchQuery: '',
scrollTop: 0,
};
@ -162,7 +163,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
this.props.updateLocation({ query: { openVizPicker: null }, partial: true });
}
this.setState({ isVizPickerOpen: false });
this.setState({ isVizPickerOpen: false, hasBeenFocused: false });
};
onSearchQueryChange = (value: string) => {
@ -173,23 +174,16 @@ export class VisualizationTab extends PureComponent<Props, State> {
renderToolbar = (): JSX.Element => {
const { plugin } = this.props;
const { searchQuery } = this.state;
const { isVizPickerOpen, searchQuery } = this.state;
if (this.state.isVizPickerOpen) {
if (isVizPickerOpen) {
return (
<>
<FilterInput
labelClassName="gf-form--has-input-icon"
inputClassName="gf-form-input width-13"
placeholder=""
onChange={this.onSearchQueryChange}
value={searchQuery}
ref={elem => elem && elem.focus()}
/>
<button className="btn btn-link toolbar__close" onClick={this.onCloseVizPicker}>
<i className="fa fa-chevron-up" />
</button>
</>
<VizPickerSearch
plugin={plugin}
searchQuery={searchQuery}
onChange={this.onSearchQueryChange}
onClose={this.onCloseVizPicker}
/>
);
} else {
return (

33
public/app/features/dashboard/panel_editor/VizPickerSearch.tsx Normal file
View File

@ -0,0 +1,33 @@
import React, { PureComponent } from 'react';
import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
import { PanelPlugin } from 'app/types';
interface Props {
plugin: PanelPlugin;
searchQuery: string;
onChange: (query: string) => void;
onClose: () => void;
}
export class VizPickerSearch extends PureComponent<Props> {
render() {
const { searchQuery, onChange, onClose } = this.props;
return (
<>
<FilterInput
labelClassName="gf-form--has-input-icon"
inputClassName="gf-form-input width-13"
placeholder=""
onChange={onChange}
value={searchQuery}
ref={element => element && element.focus()}
/>
<button className="btn btn-link toolbar__close" onClick={onClose}>
<i className="fa fa-chevron-up" />
</button>
</>
);
}
}