maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-28 12:43:11 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Blur input when pressing ESC

Browse source
This commit is contained in:
Kimmo Puputti 2018-02-14 10:26:29 +02:00
parent 2ee00aa5a0
commit 9abcb0f44c
1 changed files with 12 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/LocationAutocompleteInput/LocationAutocompleteInput.js
View file

@ -14,6 +14,7 @@ const KEY_CODE_ARROW_UP = 38;
const KEY_CODE_ARROW_DOWN = 40;
const KEY_CODE_ENTER = 13;
const KEY_CODE_TAB = 9;
const KEY_CODE_ESC = 27;
const DIRECTION_UP = 'up';
const DIRECTION_DOWN = 'down';
const TOUCH_TAP_RADIUS = 5; // Movement within 5px from touch start is considered a tap
@ -151,6 +152,9 @@ class LocationAutocompleteInput extends Component {
highlightedIndex: -1, // -1 means no highlight
};
// Ref to the input element.
this.input = null;
this.changeHighlight = this.changeHighlight.bind(this);
this.selectItem = this.selectItem.bind(this);
this.selectItemIfNoneSelected = this.selectItemIfNoneSelected.bind(this);
@ -194,6 +198,8 @@ class LocationAutocompleteInput extends Component {
}
} else if (e.keyCode === KEY_CODE_TAB) {
this.selectItemIfNoneSelected();
} else if (e.keyCode === KEY_CODE_ESC && this.input) {
this.input.blur();
}
}
@ -423,7 +429,12 @@ class LocationAutocompleteInput extends Component {
onBlur={this.handleOnBlur}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
ref={inputRef}
ref={node => {
this.input = node;
if (inputRef) {
inputRef(node);
}
}}
/>
{renderPredictions ? (
<LocationPredictionsList