diff options
author | Simon Fondrie-Teitler <simonft@riseup.net> | 2017-04-26 20:28:27 -0400 |
---|---|---|
committer | Kali Kaneko (leap communications) <kali@leap.se> | 2017-05-04 16:27:23 +0200 |
commit | aa8cf504f876182048e1f0e5b72b234b10a7f472 (patch) | |
tree | 2fc444b7b3c622621bb9f594e7b664eb5293d136 /ui/app/components/list_editor/index.js | |
parent | a6437a3f30a8690b5cb0cf9bad2d0e5253743039 (diff) |
[feat] Go to first open line when enter is pressed
When filling out the signup or login pages, and when adding an
additional service provider, the enter key will trigger the submit
action. When on the choose provider page, enter will take you to the
next page.
- Resolves: #8841
Diffstat (limited to 'ui/app/components/list_editor/index.js')
-rw-r--r-- | ui/app/components/list_editor/index.js | 24 |
1 files changed, 21 insertions, 3 deletions
diff --git a/ui/app/components/list_editor/index.js b/ui/app/components/list_editor/index.js index 58b6ec4..4fff1ca 100644 --- a/ui/app/components/list_editor/index.js +++ b/ui/app/components/list_editor/index.js @@ -20,7 +20,8 @@ class ListEdit extends React.Component { selected: null, // string of the selected item onRemove: null, onAdd: null, - onSelect: null + onSelect: null, + onKeyDown: null }} constructor(props) { @@ -64,6 +65,18 @@ class ListEdit extends React.Component { } } + componentDidMount() { + if (this.props.onKeyDown) { + this.listEditorDiv.addEventListener("keydown", this.props.onKeyDown) + } + } + + componentWillUnmount() { + if (this.props.onKeyDown) { + this.listEditorDiv.removeEventListener("keydown", this.props.onKeyDown) + } + } + render() { let options = null if (this.props.items) { @@ -72,11 +85,16 @@ class ListEdit extends React.Component { }, this) } return( - <div className="list-editor"> + <div + ref={(div) => { this.listEditorDiv = div; }} + className="list-editor" > <FormControl value={this.row(this.props.selected)} className="list-select" - componentClass="select" size="5" onChange={this.click}> + componentClass="select" + size="5" + onChange={this.click} + > {options} </FormControl> <ButtonToolbar className="pull-right list-toolbar"> |