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
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'; import { FadeIn } from 'app/core/components/Animations/FadeIn';
// Types // Types
import { PanelModel } from '../state/PanelModel'; import { PanelModel } from '../state';
import { DashboardModel } from '../state/DashboardModel'; import { DashboardModel } from '../state';
import { PanelPlugin } from 'app/types/plugins'; import { PanelPlugin } from 'app/types/plugins';
import { FilterInput } from 'app/core/components/FilterInput/FilterInput'; import { VizPickerSearch } from './VizPickerSearch';
interface Props { interface Props {
panel: PanelModel; panel: PanelModel;
@@ -33,18 +33,19 @@ interface State {
isVizPickerOpen: boolean; isVizPickerOpen: boolean;
searchQuery: string; searchQuery: string;
scrollTop: number; scrollTop: number;
hasBeenFocused: boolean;
} }
export class VisualizationTab extends PureComponent<Props, State> { export class VisualizationTab extends PureComponent<Props, State> {
element: HTMLElement; element: HTMLElement;
angularOptions: AngularComponent; angularOptions: AngularComponent;
searchInput: HTMLElement;
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
isVizPickerOpen: this.props.urlOpenVizPicker, isVizPickerOpen: this.props.urlOpenVizPicker,
hasBeenFocused: false,
searchQuery: '', searchQuery: '',
scrollTop: 0, scrollTop: 0,
}; };
@@ -162,7 +163,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
this.props.updateLocation({ query: { openVizPicker: null }, partial: true }); this.props.updateLocation({ query: { openVizPicker: null }, partial: true });
} }
this.setState({ isVizPickerOpen: false }); this.setState({ isVizPickerOpen: false, hasBeenFocused: false });
}; };
onSearchQueryChange = (value: string) => { onSearchQueryChange = (value: string) => {
@@ -173,23 +174,16 @@ export class VisualizationTab extends PureComponent<Props, State> {
renderToolbar = (): JSX.Element => { renderToolbar = (): JSX.Element => {
const { plugin } = this.props; const { plugin } = this.props;
const { searchQuery } = this.state; const { isVizPickerOpen, searchQuery } = this.state;
if (this.state.isVizPickerOpen) { if (isVizPickerOpen) {
return ( return (
<> <VizPickerSearch
<FilterInput plugin={plugin}
labelClassName="gf-form--has-input-icon" searchQuery={searchQuery}
inputClassName="gf-form-input width-13" onChange={this.onSearchQueryChange}
placeholder="" onClose={this.onCloseVizPicker}
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>
</>
); );
} else { } else {
return ( 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>
</>
);
}
}