From 7126b7053ecbfa5be263bd5e00112d6a527a8a91 Mon Sep 17 00:00:00 2001 From: Yevhenii Voloshchak Date: Mon, 18 Jul 2022 16:39:36 +0300 Subject: [PATCH 1/4] Calculate firstNonHeaderIndex every time emoji list is updated --- .../EmojiPicker/EmojiPickerMenu/index.js | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index e271680da068..79a175e6e1f1 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -86,8 +86,10 @@ class EmojiPickerMenu extends Component { this.isMobileLandscape = this.isMobileLandscape.bind(this); this.onSelectionChange = this.onSelectionChange.bind(this); this.updatePreferredSkinTone = this.updatePreferredSkinTone.bind(this); + this.setFirstNonHeaderIndex = this.setFirstNonHeaderIndex.bind(this); this.currentScrollOffset = 0; + this.firstNonHeaderIndex = 0; this.state = { filteredEmojis: this.emojis, @@ -111,6 +113,7 @@ class EmojiPickerMenu extends Component { this.props.forwardedRef(this.searchInput); } this.setupEventHandlers(); + this.setFirstNonHeaderIndex(this.emojis); } componentWillUnmount() { @@ -126,6 +129,14 @@ class EmojiPickerMenu extends Component { this.setState({selection: event.nativeEvent.selection}); } + /** + * Find and store index of the first emoji item + * @param {Array} filteredEmojis + */ + setFirstNonHeaderIndex(filteredEmojis) { + this.firstNonHeaderIndex = _.findIndex(filteredEmojis, item => !item.spacer && !item.header); + } + /** * Setup and attach keypress/mouse handlers for highlight navigation. */ @@ -214,8 +225,6 @@ class EmojiPickerMenu extends Component { * @param {String} arrowKey */ highlightAdjacentEmoji(arrowKey) { - const firstNonHeaderIndex = this.state.filteredEmojis.length === this.emojis.length ? this.numColumns : 0; - // 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' && arrowKey !== 'ArrowRight') { @@ -242,7 +251,7 @@ class EmojiPickerMenu extends Component { // If nothing is highlighted and an arrow key is pressed // select the first emoji if (this.state.highlightedIndex === -1) { - this.setState({highlightedIndex: firstNonHeaderIndex}); + this.setState({highlightedIndex: this.firstNonHeaderIndex}); this.scrollToHighlightedIndex(); return; } @@ -273,7 +282,7 @@ class EmojiPickerMenu extends Component { break; case 'ArrowLeft': move(-1, - () => this.state.highlightedIndex - 1 < firstNonHeaderIndex, + () => this.state.highlightedIndex - 1 < this.firstNonHeaderIndex, () => { // Reaching start of the list, arrow left set the focus to searchInput. this.focusInputWithTextSelect(); @@ -286,7 +295,7 @@ class EmojiPickerMenu extends Component { case 'ArrowUp': move( -this.numColumns, - () => this.state.highlightedIndex - this.numColumns < firstNonHeaderIndex, + () => this.state.highlightedIndex - this.numColumns < this.firstNonHeaderIndex, () => { // Reaching start of the list, arrow up set the focus to searchInput. this.focusInputWithTextSelect(); @@ -356,6 +365,7 @@ class EmojiPickerMenu extends Component { headerIndices: this.unfilteredHeaderIndices, highlightedIndex: -1, }); + this.setFirstNonHeaderIndex(this.emojis); return; } @@ -370,6 +380,7 @@ class EmojiPickerMenu extends Component { // Remove sticky header indices. There are no headers while searching and we don't want to make emojis sticky this.setState({filteredEmojis: newFilteredEmojiList, headerIndices: [], highlightedIndex: 0}); + this.setFirstNonHeaderIndex(newFilteredEmojiList); } /** From 33e0a17bd20405135cec6a81f21881ff97451e9f Mon Sep 17 00:00:00 2001 From: Yevhenii Voloshchak Date: Wed, 20 Jul 2022 10:18:24 +0300 Subject: [PATCH 2/4] Do nothing if there are no emojis to highlight --- src/components/EmojiPicker/EmojiPickerMenu/index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index 79a175e6e1f1..d3472b60f2f5 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -225,6 +225,11 @@ class EmojiPickerMenu extends Component { * @param {String} arrowKey */ highlightAdjacentEmoji(arrowKey) { + // Do nothing if there are no emojis to highlight + if (!this.state.filteredEmojis.length) { + return; + } + // 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' && arrowKey !== 'ArrowRight') { From 0dd5d903b3a7e4badddc826bafe38406b3af5a66 Mon Sep 17 00:00:00 2001 From: Yevhenii Voloshchak Date: Wed, 20 Jul 2022 10:25:32 +0300 Subject: [PATCH 3/4] Cleanup --- src/components/EmojiPicker/EmojiPickerMenu/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index d3472b60f2f5..f025d6545415 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -231,7 +231,7 @@ class EmojiPickerMenu extends Component { } // Arrow Down and Arrow Right enable arrow navigation when search is focused - if (this.searchInput && this.searchInput.isFocused() && this.state.filteredEmojis.length) { + if (this.searchInput && this.searchInput.isFocused()) { if (arrowKey !== 'ArrowDown' && arrowKey !== 'ArrowRight') { return; } From 5c63cedda906407dfbc5f8eb549cbe1dbaa5b31b Mon Sep 17 00:00:00 2001 From: Yevhenii Voloshchak Date: Fri, 22 Jul 2022 09:24:19 +0300 Subject: [PATCH 4/4] Cleanup --- src/components/EmojiPicker/EmojiPickerMenu/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index f025d6545415..a1101deda9e6 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -225,8 +225,7 @@ class EmojiPickerMenu extends Component { * @param {String} arrowKey */ highlightAdjacentEmoji(arrowKey) { - // Do nothing if there are no emojis to highlight - if (!this.state.filteredEmojis.length) { + if (this.state.filteredEmojis.length === 0) { return; }