diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js index e189218f7087..e934517717f3 100755 --- a/src/pages/home/report/EmojiPickerMenu/index.js +++ b/src/pages/home/report/EmojiPickerMenu/index.js @@ -84,6 +84,7 @@ class EmojiPickerMenu extends Component { this.cleanupEventHandlers = this.cleanupEventHandlers.bind(this); this.renderItem = this.renderItem.bind(this); this.isMobileLandscape = this.isMobileLandscape.bind(this); + this.onSelectionChange = this.onSelectionChange.bind(this); this.currentScrollOffset = 0; @@ -92,6 +93,10 @@ class EmojiPickerMenu extends Component { headerIndices: this.unfilteredHeaderIndices, highlightedIndex: -1, arePointerEventsDisabled: false, + selection: { + start: 0, + end: 0, + }, }; } @@ -110,6 +115,16 @@ class EmojiPickerMenu extends Component { this.cleanupEventHandlers(); } + /** + * On text input selection change + * + * @param {Event} event + */ + onSelectionChange(event) { + this.setState({selection: event.nativeEvent.selection}); + } + + /** * Setup and attach keypress/mouse handlers for highlight navigation. */ @@ -169,6 +184,18 @@ class EmojiPickerMenu extends Component { document.removeEventListener('mousemove', this.mouseMoveHandler); } + /** + * Focuses the search Input and has the text selected + */ + focusInputWithTextSelect() { + if (!this.searchInput) { + return; + } + + this.setState({selectTextOnFocus: true}); + this.searchInput.focus(); + } + /** * Highlights emojis adjacent to the currently highlighted emoji depending on the arrowKey * @param {String} arrowKey @@ -176,9 +203,18 @@ class EmojiPickerMenu extends Component { highlightAdjacentEmoji(arrowKey) { const firstNonHeaderIndex = this.state.filteredEmojis.length === this.emojis.length ? this.numColumns : 0; - // Arrow Down enable arrow navigation when search is focused + // Arrow Down and Arrow Right enable arrow navigation when search is focused if (this.searchInput && this.searchInput.isFocused() && this.state.filteredEmojis.length) { - if (arrowKey !== 'ArrowDown') { + if (arrowKey !== 'ArrowDown' && arrowKey !== 'ArrowRight') { + return; + } + + if (arrowKey === 'ArrowRight' + && !( + this.searchInput.value.length === this.state.selection.start + && this.state.selection.start === this.state.selection.end + ) + ) { return; } this.searchInput.blur(); @@ -220,7 +256,13 @@ class EmojiPickerMenu extends Component { ); break; case 'ArrowLeft': - move(-1, () => this.state.highlightedIndex - 1 < firstNonHeaderIndex); + move(-1, + () => this.state.highlightedIndex - 1 < firstNonHeaderIndex, + () => { + // Reaching start of the list, arrow left set the focus to searchInput. + this.focusInputWithTextSelect(); + newIndex = -1; + }); break; case 'ArrowRight': move(1, () => this.state.highlightedIndex + 1 > this.state.filteredEmojis.length - 1); @@ -230,12 +272,8 @@ class EmojiPickerMenu extends Component { -this.numColumns, () => this.state.highlightedIndex - this.numColumns < firstNonHeaderIndex, () => { - if (!this.searchInput) { - return; - } - // Reaching start of the list, arrow up set the focus to searchInput. - this.searchInput.focus(); + this.focusInputWithTextSelect(); newIndex = -1; }, ); @@ -380,6 +418,7 @@ class EmojiPickerMenu extends Component { ref={el => this.searchInput = el} autoFocus selectTextOnFocus={this.state.selectTextOnFocus} + onSelectionChange={this.onSelectionChange} /> )}