imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dropdown stop keyboard propagation if key handled

Browse source
This commit is contained in:
Michael Telatynski 2019-12-17 15:14:01 +00:00
parent 0140338ac5
commit 7f78f55c94
1 changed files with 11 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/components/views/elements/Dropdown.js
View file

@ -94,8 +94,6 @@ export default class Dropdown extends React.Component {
this._onRootClick = this._onRootClick.bind(this); this._onRootClick = this._onRootClick.bind(this);
this._onDocumentClick = this._onDocumentClick.bind(this); this._onDocumentClick = this._onDocumentClick.bind(this);
this._onMenuOptionClick = this._onMenuOptionClick.bind(this); this._onMenuOptionClick = this._onMenuOptionClick.bind(this);
this._onInputKeyPress = this._onInputKeyPress.bind(this);
this._onInputKeyUp = this._onInputKeyUp.bind(this);
this._onInputChange = this._onInputChange.bind(this); this._onInputChange = this._onInputChange.bind(this);
this._collectRoot = this._collectRoot.bind(this); this._collectRoot = this._collectRoot.bind(this);
this._collectInputTextBox = this._collectInputTextBox.bind(this); this._collectInputTextBox = this._collectInputTextBox.bind(this);
@ -193,14 +191,9 @@ export default class Dropdown extends React.Component {
this.props.onOptionChange(dropdownKey); this.props.onOptionChange(dropdownKey);
} }
_onInputKeyPress(e) { _onInputKeyDown = (e) => {
// This needs to be on the keypress event because otherwise it can't cancel the form submission let handled = true;
if (e.key === Key.ENTER) {
e.preventDefault();
}
}
_onInputKeyUp(e) {
// These keys don't generate keypress events and so needs to be on keyup // These keys don't generate keypress events and so needs to be on keyup
switch (e.key) { switch (e.key) {
case Key.ENTER: case Key.ENTER:
@ -219,6 +212,13 @@ export default class Dropdown extends React.Component {
highlightedOption: this._prevOption(this.state.highlightedOption), highlightedOption: this._prevOption(this.state.highlightedOption),
}); });
break; break;
default:
handled = false;
}
if (handled) {
e.preventDefault();
e.stopPropagation();
} }
} }
@ -314,8 +314,7 @@ export default class Dropdown extends React.Component {
type="text" type="text"
className="mx_Dropdown_option" className="mx_Dropdown_option"
ref={this._collectInputTextBox} ref={this._collectInputTextBox}
onKeyPress={this._onInputKeyPress} onKeyDown={this._onInputKeyDown}
onKeyUp={this._onInputKeyUp}
onChange={this._onInputChange} onChange={this._onInputChange}
value={this.state.searchQuery} value={this.state.searchQuery}
role="combobox" role="combobox"