Skip to content

Commit

Permalink
Autofocus search input in VizTypeControl modal onEnter (#2929)
Browse files Browse the repository at this point in the history
  • Loading branch information
pariser authored and mistercrunch committed Jul 28, 2017
1 parent b58cfbc commit 58a704b
Showing 1 changed file with 18 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -82,14 +92,21 @@ 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>
<Modal.Body>
<div>
<FormControl
id="formControlsText"
inputRef={(ref) => { this.setSearchRef(ref); }}
type="text"
bsSize="sm"
value={this.state.filter}
Expand Down

0 comments on commit 58a704b

Please sign in to comment.