[HOLD for payment 2023-08-07] [$1000] In emoji picker, clicking on spacebar leaves selected/highlight focus on emoji

[kavimuru]

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. Open expensify on chrome web
2. Go to any chat
3. Open Emoji picker from composer
4. Use tab/arrow key to navigate in emoji list
5. While focus is on any emoji, click on spacebar from keyboard
6. Click on reply in thread and some thread message
7. Notice that it leaves highlight focus on emoji and cursor moves to search input. It looks like emoji as selected.

Expected Result:

Clicking on spacebar shouldn't leave any selected/highlight focus on emoji

Actual Result:

Clicking on spacebar leaves highlight focus on emoji which looks like it is selected.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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.33-4
Reproducible in staging?: y
Reproducible in production?: y
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

Screen.Recording.2023-06-26.at.5.36.13.PM.mov

Recording.939.mp4

Expensify/Expensify Issue URL:
Issue reported by: @payal-lathidadiya
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1687781639891659

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015d6317c506d1197c
• Upwork Job ID: 1675207585634836480
• Last Price Increase: 2023-07-15

[dukenv0307]

Proposal

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

In emoji picker, clicking on spacebar leaves selected/highlight focus on emoji

What is the root cause of that problem?

We allow typing in the search box if any key is pressed. But we don't prevent some special keys like space, backspace, command, esc, option, control,...

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

Lines 181 to 190 in ab9171f

	// We allow typing in the search box if any key is pressed apart from Arrow keys.
	if (this.searchInput && !this.searchInput.isFocused()) {
	this.setState({selectTextOnFocus: false});
	this.searchInput.focus();
	// Re-enable selection on the searchInput
	this.setState({selectTextOnFocus: true});
	}
	};

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

We should confirm which key we should ignore (don't focus) when the user clicks like space, backspace, alt, ...
Then we will prevent focusing the input by adding this condition here

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

Lines 180 to 182 in ab9171f

	// We allow typing in the search box if any key is pressed apart from Arrow keys.
	if (this.searchInput && !this.searchInput.isFocused()) {

            if ((keyBoardEvent.metaKey || keyBoardEvent.ctrlKey || keyBoardEvent.altKey  || keyBoardEvent.key === ' ' || keyBoardEvent.key === 'BackSpace' )) {
                this.setState({selectTextOnFocus: false});
                return;
            }

What alternative solutions did you explore? (Optional)

[melvin-bot]

Triggered auto assignment to @MitchExpensify (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

[payal-lathidadiya]

Proposal

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

In emoji picker, clicking on spacebar leaves selected/highlight focus on emoji

What is the root cause of that problem?

The cause of is due to button background style is getting applied when button is pressed.
code here

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

We already have other required custom style attributes to highlight emoji item for both keyboard move/mouse hover when emoji is focused and navigated here

So, we should remove below from style attribute defined in PressableWithoutFeedback in EmojiPickerMenuItem.js;

StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),

What alternative solutions did you explore? (Optional)

None

[bernhardoj]

Proposal

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

Navigating through emojis with keyboard and then pressing Space on an emoji will leave the emoji highlighted.

What is the root cause of that problem?

Navigating through emojis with keyboard will focus the emoji. This means, pressing Space will "press" the emoji (this is a common web behavior. You can either press enter/space to a button to trigger the click). The issue is, pressing Space will trigger 2 key-down listeners.

The first one,

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

Lines 174 to 182 in 5009b8d

	// We allow typing in the search box if any key is pressed apart from Arrow keys.
	if (this.searchInput && !this.searchInput.isFocused()) {
	this.setState({selectTextOnFocus: false});
	this.searchInput.focus();
	// Re-enable selection on the searchInput
	this.setState({selectTextOnFocus: true});
	}
	};

In this first listener, we want pressing a Space key adds space to the text input.

The second one is on the emoji itself. Remember that the emoji is a Pressable. When an emoji is pressed either by space/enter/mouse click, the background will change.

App/src/components/EmojiPicker/EmojiPickerMenuItem.js

Lines 71 to 72 in 5009b8d

	style={({pressed}) => [
	StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),

So, what exactly happens when we press a Space key on an emoji?

First, the first listener will be triggered which will focus the text input and add a space to it.
Next, the emoji key-down is triggered. In React, the key-down will trigger the onPressIn callback and set the internal pressed state to true. The problem is, the key-up is never triggered. Key-up is the one that is responsible to trigger onPressOut and setting the internal pressed state to false, and also trigger the onPress. Because the focus is shifted to text input, the key-up event is never captured by the emoji (because it's not focused anymore). So, we can say that the key-up event is lost and the pressed state is stuck in true.

That's why the emoji background stays highlighted.

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

As pressing a Space key will trigger 2 key-down, we need to decide what happens when a Space key is pressed. Is it adding a space to the text input? Or have the same behavior as Enter which is to select the emoji and close the picker? Below solution assuming we want the former one. The latter one is on the alternative solution.

---

To prevent the emoji stays highlighted, we need to have a full control overpressed state. With that in mind, we need a new state isPressed and replace the pressed in styles with this.state.isPressed.

App/src/components/EmojiPicker/EmojiPickerMenuItem.js

Lines 71 to 72 in 5009b8d

	style={({pressed}) => [
	StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),

We will set isPressed to false in onPressOut and to true in onPressIn IF the key is not Space.

onPressIn={(e) => {
    if (e.key === ' ' || e.key === 'Spacebar') return;
    this.setState({isPressed: true});
}}

What alternative solutions did you explore? (Optional)

This alternative will change the behavior of Space to be the same as Enter. To do that, we just need to early return if the key is Space here.

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

Lines 144 to 154 in 5009b8d

	this.keyDownHandler = (keyBoardEvent) => {
	if (keyBoardEvent.key.startsWith('Arrow')) {
	if (!this.state.isFocused || keyBoardEvent.key === 'ArrowUp' || keyBoardEvent.key === 'ArrowDown') {
	keyBoardEvent.preventDefault();
	}
	// Move the highlight when arrow keys are pressed
	this.highlightAdjacentEmoji(keyBoardEvent.key);
	return;
	}

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~015d6317c506d1197c

[melvin-bot]

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