mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
Autofocus search input in VizTypeControl modal onEnter (#2929)
This commit is contained in:
parent
b58cfbcb91
commit
58a704b84c
@ -25,17 +25,27 @@ export default class VizTypeControl extends React.PureComponent {
|
|||||||
};
|
};
|
||||||
this.toggleModal = this.toggleModal.bind(this);
|
this.toggleModal = this.toggleModal.bind(this);
|
||||||
this.changeSearch = this.changeSearch.bind(this);
|
this.changeSearch = this.changeSearch.bind(this);
|
||||||
|
this.setSearchRef = this.setSearchRef.bind(this);
|
||||||
|
this.focusSearch = this.focusSearch.bind(this);
|
||||||
}
|
}
|
||||||
onChange(vizType) {
|
onChange(vizType) {
|
||||||
this.props.onChange(vizType);
|
this.props.onChange(vizType);
|
||||||
this.setState({ showModal: false });
|
this.setState({ showModal: false });
|
||||||
}
|
}
|
||||||
|
setSearchRef(searchRef) {
|
||||||
|
this.searchRef = searchRef;
|
||||||
|
}
|
||||||
toggleModal() {
|
toggleModal() {
|
||||||
this.setState({ showModal: !this.state.showModal });
|
this.setState({ showModal: !this.state.showModal });
|
||||||
}
|
}
|
||||||
changeSearch(event) {
|
changeSearch(event) {
|
||||||
this.setState({ filter: event.target.value });
|
this.setState({ filter: event.target.value });
|
||||||
}
|
}
|
||||||
|
focusSearch() {
|
||||||
|
if (this.searchRef) {
|
||||||
|
this.searchRef.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
renderVizType(vizType) {
|
renderVizType(vizType) {
|
||||||
const vt = vizType;
|
const vt = vizType;
|
||||||
return (
|
return (
|
||||||
@ -82,7 +92,13 @@ export default class VizTypeControl extends React.PureComponent {
|
|||||||
<Label onClick={this.toggleModal} style={{ cursor: 'pointer' }}>
|
<Label onClick={this.toggleModal} style={{ cursor: 'pointer' }}>
|
||||||
{visTypes[this.props.value].label}
|
{visTypes[this.props.value].label}
|
||||||
</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.Header closeButton>
|
||||||
<Modal.Title>Select a visualization type</Modal.Title>
|
<Modal.Title>Select a visualization type</Modal.Title>
|
||||||
</Modal.Header>
|
</Modal.Header>
|
||||||
@ -90,6 +106,7 @@ export default class VizTypeControl extends React.PureComponent {
|
|||||||
<div>
|
<div>
|
||||||
<FormControl
|
<FormControl
|
||||||
id="formControlsText"
|
id="formControlsText"
|
||||||
|
inputRef={(ref) => { this.setSearchRef(ref); }}
|
||||||
type="text"
|
type="text"
|
||||||
bsSize="sm"
|
bsSize="sm"
|
||||||
value={this.state.filter}
|
value={this.state.filter}
|
||||||
|
Loading…
Reference in New Issue
Block a user