From 87a5408dbe422264622595c631cc77438771de34 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 11 Jan 2022 18:40:58 +0530 Subject: [PATCH 1/5] fix: Added ArrowRight handling for EmojiPicker searchInput --- src/pages/home/report/EmojiPickerMenu/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js index 019f14ba3b1a..94407097c610 100755 --- a/src/pages/home/report/EmojiPickerMenu/index.js +++ b/src/pages/home/report/EmojiPickerMenu/index.js @@ -178,7 +178,7 @@ class EmojiPickerMenu extends Component { // Arrow Down enable arrow navigation when search is focused if (this.searchInput && this.searchInput.isFocused() && this.state.filteredEmojis.length) { - if (arrowKey !== 'ArrowDown') { + if (['ArrowDown', 'ArrowRight'].indexOf(arrowKey) === -1) { return; } this.searchInput.blur(); From e2cba1ee507a31a8dd9e69d2cd39938e3a00d309 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 11 Jan 2022 18:46:57 +0530 Subject: [PATCH 2/5] fix: Added ArrowLeft handling to the first emoji --- src/pages/home/report/EmojiPickerMenu/index.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js index 94407097c610..7823828360a8 100755 --- a/src/pages/home/report/EmojiPickerMenu/index.js +++ b/src/pages/home/report/EmojiPickerMenu/index.js @@ -220,7 +220,17 @@ class EmojiPickerMenu extends Component { ); break; case 'ArrowLeft': - move(-1, () => this.state.highlightedIndex - 1 < firstNonHeaderIndex); + move(-1, + () => this.state.highlightedIndex - 1 < firstNonHeaderIndex, + () => { + if (!this.searchInput) { + return; + } + + // Reaching start of the list, arrow up set the focus to searchInput. + this.searchInput.focus(); + newIndex = -1; + }); break; case 'ArrowRight': move(1, () => this.state.highlightedIndex + 1 > this.state.filteredEmojis.length - 1); From e3c8300b88233982c1d9338f1c7f92aa1792b12a Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 11 Jan 2022 18:57:40 +0530 Subject: [PATCH 3/5] fix: Changed comment copy --- src/pages/home/report/EmojiPickerMenu/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js index 7823828360a8..6e1558fcf294 100755 --- a/src/pages/home/report/EmojiPickerMenu/index.js +++ b/src/pages/home/report/EmojiPickerMenu/index.js @@ -227,7 +227,7 @@ class EmojiPickerMenu extends Component { return; } - // Reaching start of the list, arrow up set the focus to searchInput. + // Reaching start of the list, arrow left set the focus to searchInput. this.searchInput.focus(); newIndex = -1; }); From 6d78e41669fe7d2510882f89fd23540bcf8973f1 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Sat, 15 Jan 2022 01:01:31 +0530 Subject: [PATCH 4/5] fix: Track cursor movement and handle arrow keys transition --- .../home/report/EmojiPickerMenu/index.js | 50 ++++++++++++++----- 1 file changed, 38 insertions(+), 12 deletions(-) diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js index 9ab85b54385f..68bbc8d8af61 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,17 @@ class EmojiPickerMenu extends Component { document.removeEventListener('mousemove', this.mouseMoveHandler); } + focusInputWithTextSelect() { + if (!this.searchInput) { + return; + } + + this.setState({selectTextOnFocus: true}); + + // Reaching start of the list, arrow left/up set the focus to searchInput. + this.searchInput.focus(); + } + /** * Highlights emojis adjacent to the currently highlighted emoji depending on the arrowKey * @param {String} arrowKey @@ -181,6 +207,15 @@ class EmojiPickerMenu extends Component { if (['ArrowDown', 'ArrowRight'].indexOf(arrowKey) === -1) { return; } + + if (arrowKey === 'ArrowRight' + && !( + this.searchInput.value.length === this.state.selection.start + && this.state.selection.start === this.state.selection.end + ) + ) { + return; + } this.searchInput.blur(); // We only want to hightlight the Emoji if none was highlighted already @@ -223,12 +258,7 @@ class EmojiPickerMenu extends Component { move(-1, () => this.state.highlightedIndex - 1 < firstNonHeaderIndex, () => { - if (!this.searchInput) { - return; - } - - // Reaching start of the list, arrow left set the focus to searchInput. - this.searchInput.focus(); + this.focusInputWithTextSelect(); newIndex = -1; }); break; @@ -240,12 +270,7 @@ 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; }, ); @@ -390,6 +415,7 @@ class EmojiPickerMenu extends Component { ref={el => this.searchInput = el} autoFocus selectTextOnFocus={this.state.selectTextOnFocus} + onSelectionChange={this.onSelectionChange} /> )} From 83635661169528f6327c6faa376038906d937f1f Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Sat, 15 Jan 2022 09:38:03 +0530 Subject: [PATCH 5/5] fix: Code cleanup and add comments --- src/pages/home/report/EmojiPickerMenu/index.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js index 68bbc8d8af61..e934517717f3 100755 --- a/src/pages/home/report/EmojiPickerMenu/index.js +++ b/src/pages/home/report/EmojiPickerMenu/index.js @@ -184,14 +184,15 @@ 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}); - - // Reaching start of the list, arrow left/up set the focus to searchInput. this.searchInput.focus(); } @@ -202,9 +203,9 @@ 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 (['ArrowDown', 'ArrowRight'].indexOf(arrowKey) === -1) { + if (arrowKey !== 'ArrowDown' && arrowKey !== 'ArrowRight') { return; } @@ -258,6 +259,7 @@ class EmojiPickerMenu extends Component { move(-1, () => this.state.highlightedIndex - 1 < firstNonHeaderIndex, () => { + // Reaching start of the list, arrow left set the focus to searchInput. this.focusInputWithTextSelect(); newIndex = -1; }); @@ -270,6 +272,7 @@ class EmojiPickerMenu extends Component { -this.numColumns, () => this.state.highlightedIndex - this.numColumns < firstNonHeaderIndex, () => { + // Reaching start of the list, arrow up set the focus to searchInput. this.focusInputWithTextSelect(); newIndex = -1; },