[HOLD for payment 2023-10-30] [HOLD for payment 2023-10-27] [$250] Chat - First row emojis are skipped

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number: 1.3.87.8
Reproducible in staging?: y
Reproducible in production?: n
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by:@s-alves10
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1697753213411739

Action Performed:

Open ND and log in with any account
Open any chat and tap emoji button in the main composer to open EmojiPicker
Type any characters in search input(for example, he)
Press arrow down key several times and try to highlight first row emojis by pressing arrow down or arrow left keys
Verify that first row emojis are skipped

Expected Result:

First row emojis can be highlighted by arrow keys

Actual Result:

First row emojis are skipped

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Screenshots/Videos

Android: Native

Android: mWeb Chrome

android_chrome.1.mp4

iOS: Native

iOS: mWeb Safari

ios_safari.1.mp4

MacOS: Chrome / Safari

mac_chrome.mp4

Recording.5093.mp4

MacOS: Desktop

mac_desktop.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01ed51d25e4548ec9f
Upwork Job ID: 1715386754082848768
Last Price Increase: 2023-10-20
Automatic offers:

fedirjh | Reviewer | 27296434
s-alves10 | Contributor | 27296440

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

@AndrewGable

Triggered auto assignment to @AndrewGable (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Can't highlight first row emojis by arrow keys when searching emojis in Emoji Picker

What is the root cause of that problem?

When moving highlight by arrow keys, we check the bound by the following code

App/src/components/EmojiPicker/EmojiPickerMenu/index.js

Line 257 in 18acd82

() => highlightedIndex - 1 < firstNonHeaderIndex.current,

App/src/components/EmojiPicker/EmojiPickerMenu/index.js

Line 271 in 18acd82

() => highlightedIndex - CONST.EMOJI_NUM_PER_ROW < firstNonHeaderIndex.current,

When searching emojis, firstNonHeaderIndex.current should be 0 because there are no spaces or headers.
But this value is updated by

App/src/components/EmojiPicker/EmojiPickerMenu/index.js

Lines 364 to 379 in 18acd82

    
           useEffect(() => { 
        
               // This callback prop is used by the parent component using the constructor to 
        
               // get a ref to the inner textInput element e.g. if we do 
        
               // <constructor ref={el => this.textInput = el} /> this will not 
        
               // return a ref to the component, but rather the HTML element by default 
        
               if (shouldFocusInputOnScreenFocus && forwardedRef && _.isFunction(forwardedRef)) { 
        
                   forwardedRef(searchInputRef.current); 
        
               } 
        
               setupEventHandlers(); 
        
               updateFirstNonHeaderIndex(emojis.current); 
        
               return () => { 
        
                   cleanupEventHandlers(); 
        
               }; 
        
           }, [forwardedRef, shouldFocusInputOnScreenFocus, cleanupEventHandlers, setupEventHandlers]);

every time its dependency changes

App/src/components/EmojiPicker/EmojiPickerMenu/index.js

Line 374 in 18acd82

updateFirstNonHeaderIndex(emojis.current);

That is, updateFirstNonHeaderIndex function is called with the entire emojis every time highlight index is changed. So the value of firstNonHeaderIndex.current becomes 8
This is the root cause

What changes do you think we should make in order to solve the problem?

updateFirstNonHeaderIndex function should be called with the entire emojis only on mount and when search input is empty.
We do this when search input is empty here

App/src/components/EmojiPicker/EmojiPickerMenu/index.js

Line 180 in 18acd82

updateFirstNonHeaderIndex(emojis.current);

Remove this line and call the function on mount

    useEffect(() => {
        updateFirstNonHeaderIndex(emojis.current);
    }, []);

This works as expected

What alternative solutions did you explore? (Optional)

Proposal by:@s-alves10
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1697753213411739

Proposal

Please re-state the problem that we are trying to solve in this issue.

Can't highlight first row emojis by arrow keys when searching emojis in Emoji Picker

What is the root cause of that problem?

When moving highlight by arrow keys, we check the bound by the following code

App/src/components/EmojiPicker/EmojiPickerMenu/index.js

Line 257 in 18acd82

() => highlightedIndex - 1 < firstNonHeaderIndex.current,

App/src/components/EmojiPicker/EmojiPickerMenu/index.js

Line 271 in 18acd82

() => highlightedIndex - CONST.EMOJI_NUM_PER_ROW < firstNonHeaderIndex.current,

When searching emojis, firstNonHeaderIndex.current should be 0 because there are no spaces or headers.
But this value is updated by

App/src/components/EmojiPicker/EmojiPickerMenu/index.js

Lines 364 to 379 in 18acd82

    
           useEffect(() => { 
        
               // This callback prop is used by the parent component using the constructor to 
        
               // get a ref to the inner textInput element e.g. if we do 
        
               // <constructor ref={el => this.textInput = el} /> this will not 
        
               // return a ref to the component, but rather the HTML element by default 
        
               if (shouldFocusInputOnScreenFocus && forwardedRef && _.isFunction(forwardedRef)) { 
        
                   forwardedRef(searchInputRef.current); 
        
               } 
        
               setupEventHandlers(); 
        
               updateFirstNonHeaderIndex(emojis.current); 
        
               return () => { 
        
                   cleanupEventHandlers(); 
        
               }; 
        
           }, [forwardedRef, shouldFocusInputOnScreenFocus, cleanupEventHandlers, setupEventHandlers]);

every time its dependency changes

App/src/components/EmojiPicker/EmojiPickerMenu/index.js

Line 374 in 18acd82

updateFirstNonHeaderIndex(emojis.current);

That is, updateFirstNonHeaderIndex function is called with the entire emojis every time highlight index is changed. So the value of firstNonHeaderIndex.current becomes 8
This is the root cause

What changes do you think we should make in order to solve the problem?

updateFirstNonHeaderIndex function should be called with the entire emojis only on mount and when search input is empty.
We do this when search input is empty here

App/src/components/EmojiPicker/EmojiPickerMenu/index.js

Line 180 in 18acd82

updateFirstNonHeaderIndex(emojis.current);

Remove this line and call the function on mount

    useEffect(() => {
        updateFirstNonHeaderIndex(emojis.current);
    }, []);

This works as expected

What alternative solutions did you explore? (Optional)

Job added to Upwork: https://www.upwork.com/jobs/~01ed51d25e4548ec9f

@fedirjh

Triggered auto assignment to Contributor-plus team member for initial proposal review - @fedirjh (External)

@AndrewGable

@AndrewGable, @fedirjh, @s-alves10 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

@joekaufmanexpensify

Triggered auto assignment to @joekaufmanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

@joekaufmanexpensify

@joekaufmanexpensify - Can you pay out? Thanks

Sure!

@fedirjh

This PR qualified for a speed bonus, this means we need to make the following payments:

@s-alves10 - $425 ($250 for PR + $125 speed bonus + $50 for reporting the bug). Paid via Upwork.
@fedirjh - $375 ($250 for C+ review + $125 speed bonus). Paid via Upwork.

@s-alves10 $425 sent and contract ended!

@fedirjh

@fedirjh $375 sent and contract ended!

Upwork job closed.

Closing as this is all set. Thanks everyone!

Navigation Menu

Repository navigation

[HOLD for payment 2023-10-30] [HOLD for payment 2023-10-27] [$250] Chat - First row emojis are skipped #30083

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

29 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	useEffect(() => {
	// This callback prop is used by the parent component using the constructor to
	// get a ref to the inner textInput element e.g. if we do
	// <constructor ref={el => this.textInput = el} /> this will not
	// return a ref to the component, but rather the HTML element by default
	if (shouldFocusInputOnScreenFocus && forwardedRef && _.isFunction(forwardedRef)) {
	forwardedRef(searchInputRef.current);
	}

	setupEventHandlers();
	updateFirstNonHeaderIndex(emojis.current);

	return () => {
	cleanupEventHandlers();
	};
	}, [forwardedRef, shouldFocusInputOnScreenFocus, cleanupEventHandlers, setupEventHandlers]);

[HOLD for payment 2023-10-30] [HOLD for payment 2023-10-27] [$250] Chat - First row emojis are skipped #30083

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

OSBotify commented on Oct 20, 2023

melvin-bot commented on Oct 20, 2023

dummy-1111 commented on Oct 20, 2023

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

kbecciv commented on Oct 20, 2023

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

melvin-bot commented on Oct 20, 2023

melvin-bot commented on Oct 20, 2023

29 remaining items

melvin-bot commented on Oct 30, 2023

melvin-bot commented on Oct 31, 2023

melvin-bot commented on Oct 31, 2023

AndrewGable commented on Oct 31, 2023

joekaufmanexpensify commented on Nov 1, 2023

joekaufmanexpensify commented on Nov 1, 2023

joekaufmanexpensify commented on Nov 1, 2023

joekaufmanexpensify commented on Nov 1, 2023

joekaufmanexpensify commented on Nov 1, 2023

joekaufmanexpensify commented on Nov 1, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions