[HOLD for payment 2023-09-12] [$1000] Compose Box - User able to select 2 emoji at a time

[lanitochka17]

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

---

Action Performed:

1. Launch app
2. Tap on a report
3. Tap on emoji picker in compose box
4. From smileys&emotion section, select any 2 emoji

Expected Result:

The user should be able to select only one emoji at a time

Actual Result:

The user is allowed to select 2 emojis at a time

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.51.0

Reproducible in staging?: Yes

Reproducible in production?: Yes

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

Notes/Photos/Videos: Any additional supporting documentation

Bug6157001_twoemojiusethis.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d67b0c351a8b8c5d
• Upwork Job ID: 1689041921265803264
• Last Price Increase: 2023-08-08
• Automatic offers:
• tienifr | Contributor | 26144133

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[akinwale]

Proposal

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

A user is able to select and send 2 emojis at the same time before the emoji picker closes.

What is the root cause of that problem?

After the user selects an emoji, the other emojis can still accept touch or press input during the brief period while the emoji picker is still open. Since the other emojis can still accept touch or press input, the onPress event handler will be invoked for any subsequent emoji pressed. Note that this only happens on iOS and Android native.

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

Line 153 in fdcae9f

onPress={(emoji) => addToFrequentAndSelectEmoji(emoji, item)}

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

Since this happens on iOS and Android native (all web platforms and desktop are fine), only EmojiPickerMenu/index.native.js needs to be updated.

Solution 1
Use a reference to store a flag that an emoji has already been pressed. The following changes can be made to achieve this:

1. Add the useRef: const emojiPickedRef = useRef(null);
2. Update the onPress handler:

onPress={(emoji) => {
    if (emojiPickedRef.current) {
        return;
    }
    emojiPickedRef.current = true;
    addToFrequentAndSelectEmoji(emoji, item);
}}

Solution 2
Debounce (combined with useCallback if necessary), or throttle the onPress handler for the emoji picker item in the EmojiPickerMenu component.

What alternative solutions did you explore? (Optional)

I tried to use a state variable to track the emoji picked boolean flag, but it is possible for a user to tap fast enough to send a subsequent onPress event before React updates the state.

[melvin-bot]

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

[melvin-bot]

Current assignee @lschurr is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[FabianKoder]

Proposal

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

A user is able to select 2 emojis at the same time before the emoji picker closes.

What is the root cause of that problem?

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

Lines 91 to 95 in 0f83752

	const addToFrequentAndSelectEmoji = (emoji, emojiObject) => {
	const frequentEmojiList = EmojiUtils.getFrequentlyUsedEmojis(emojiObject);
	User.updateFrequentlyUsedEmojis(frequentEmojiList);
	onEmojiSelected(emoji, emojiObject);
	};

The onEmojiSelected call toggles the visibility of the emoji picker, but since it it a state, it only will be updated on the next render (when the emoji picker disappears).

It is also possible to add more than 2 emojis if the device is slow enough.

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

App/src/components/EmojiPicker/EmojiPicker.js

Line 98 in 0f83752

if (!isEmojiPickerVisible) {

Check if emojiPopoverAnchor.current is null, instead of checking if !isEmojiPickerVisibile. This will ensure that even before the next render, the selectEmoji function will know that it needs to prevent adding another emoji. This would also solve the bug if it would occur on web (which probably just not occurs because the state update happens faster, e.g. because of faster devices).

What alternative solutions did you explore? (Optional)

N/A

Note: I edited this proposal, since my first proposal was not tested. The new one is tested and confirmed that it works.

[tienifr]

Proposal

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

The user is allowed to select 2 emojis at a time.

What is the root cause of that problem?

In here

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

Line 153 in ab99bf4

onPress={(emoji) => addToFrequentAndSelectEmoji(emoji, item)}

, if we press emojis quickly, the onPress will be triggered multiple times, causing many emojis to be selected.

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

We need to prevent selection of emojis if the last emoji selection didn't finish executing. After this issue is fixed, we'll have a useSingleExecution hook that can be used to limit execution to one at a time (see detailed explanation here).

Then we can use that hook to wrap the callback here

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

Line 153 in ab99bf4

onPress={(emoji) => addToFrequentAndSelectEmoji(emoji, item)}

, so we can ensure the emoji can only be selected one at a time.

There'll be small changes needed in that useSingleExecution definition to allow passing in params

(action) => (...params) => {

and

const execution = action(params);

Then it will be a 1-liner change in here:

onPress={singleExecution((emoji) => addToFrequentAndSelectEmoji(emoji, item))}

and it uses a general approach that's also used in other places in the app (useSingleExecution).

What alternative solutions did you explore? (Optional)

NA