pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Autofocus search input in VizTypeControl modal onEnter (#2929)

This commit is contained in:
Andrew Pariser 2017-07-28 14:57:24 -07:00 committed by Maxime Beauchemin
parent b58cfbcb91
commit 58a704b84c
1 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
superset/assets/javascripts/explore/components/controls/VizTypeControl.jsx
View File

@ -25,17 +25,27 @@ export default class VizTypeControl extends React.PureComponent {
};
this.toggleModal = this.toggleModal.bind(this);
this.changeSearch = this.changeSearch.bind(this);
this.setSearchRef = this.setSearchRef.bind(this);
this.focusSearch = this.focusSearch.bind(this);
}
onChange(vizType) {
this.props.onChange(vizType);
this.setState({ showModal: false });
}
setSearchRef(searchRef) {
this.searchRef = searchRef;
}
toggleModal() {
this.setState({ showModal: !this.state.showModal });
}
changeSearch(event) {
this.setState({ filter: event.target.value });
}
focusSearch() {
if (this.searchRef) {
this.searchRef.focus();
}
}
renderVizType(vizType) {
const vt = vizType;
return (
@ -82,7 +92,13 @@ export default class VizTypeControl extends React.PureComponent {
<Label onClick={this.toggleModal} style={{ cursor: 'pointer' }}>
{visTypes[this.props.value].label}
</Label>
<Modal show={this.state.showModal} onHide={this.toggleModal} bsSize="lg">
<Modal
show={this.state.showModal}
onHide={this.toggleModal}
onEnter={this.focusSearch}
onExit={this.setSearchRef}
bsSize="lg"
>
<Modal.Header closeButton>
<Modal.Title>Select a visualization type</Modal.Title>
</Modal.Header>
@ -90,6 +106,7 @@ export default class VizTypeControl extends React.PureComponent {
<div>
<FormControl
id="formControlsText"
inputRef={(ref) => { this.setSearchRef(ref); }}
type="text"
bsSize="sm"
value={this.state.filter}