[HOLD for payment 2022-08-30] [$250] Unable to move cursor (left/right) in searchbar - Reported by @daraksha-dk

[mvtglobally]

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. Go to any chat
2. click on emoji picker
3. Type any keyword
4. Try pressing left/right arrow key

Expected Result:

User should be able to move the cursor left or right when focused

Actual Result:

User unable to move the cursor left or right when focused

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• Desktop App

Version Number: 1.1.86-2
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @daraksha-dk
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1657462486325009

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @NicMendonca (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[melvin-bot]

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

[pecanoro]

I was able to reproduce it, it works fine when typing a message but it's kind of broken in the emoji picker. I also noticed that moving up in the emoji picker is broken when the cursor goes out of sight.

[melvin-bot]

Triggered auto assignment to @dylanexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[dylanexpensify]

internal: https://www.upwork.com/ab/applicants/1554740356535685120/job-details
external: https://www.upwork.com/jobs/~0126faf1bb35fa93b6

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @neil-marcellini (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[vladnyk]

Proposal

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

Line 150 in 28778a0

keyBoardEvent.preventDefault();

This happens because of this line when any arrow key is pressed. To make left, right arrows work as default behavior in input box, this line should be removed.
Also I think default behavior is more user friendly than switching highlight to emoji when right arrow pressed, even though cursor is at the end of input text. Down arrow key is already doing this.

Solution
do default behavior when arrow left or right key is pressed while search input is focused

            if (keyBoardEvent.key.startsWith('Arrow')) {
+++             if (!this.state.isFocused || (keyBoardEvent.key !== 'ArrowLeft' && keyBoardEvent.key !== 'ArrowRight')) {
                    keyBoardEvent.preventDefault();

                    // Move the highlight when arrow keys are pressed
                    this.highlightAdjacentEmoji(keyBoardEvent.key);
+++             }
                return;
            }

move.cursor.mov

[syedsaroshfarrukhdot]

Proposal

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

Line 150 in 28778a0

keyBoardEvent.preventDefault();

The bug occurs because of keyBoardEvent.preventDefault(); which disable keyobard key default behaviour on the input field in search box when arrow keys on keyboard are pressed.

Solution
So we could add a condition on keyBoardEvent.preventDefault(); to avoid this behaviour that if isFocused state true then avoid prevent default behaiour.

if (!this.searchInput.isFocused){
keyBoardEvent.preventDefault();
}

Screen.Recording.2022-08-03.at.2.56.51.PM.mov

[jayeshmangwani]

Proposal

We will check if the search input is focused and ArrowLeft or ArrowRight pressed then return from keyDownHandler and do nothing

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

Line 148 in 28778a0

this.keyDownHandler = (keyBoardEvent) => {

+if (this.searchInput && this.searchInput.isFocused() && _.contains(['ArrowLeft', 'ArrowRight'], keyBoardEvent.key)) {
+  return;
+}

10182-unable-to-move-cursor.mov

[parasharrajat]

This sounds like a regression to me. Checking...

[neil-marcellini]

That proposal looks good to me too! The only tiny thing I would change is updating the condition to avoid negations. I think it's more clear like so.
if (!this.state.isFocused || keyBoardEvent.key === 'ArrowUp' || keyBoardEvent.key === 'ArrowDown')

@errahsoufiane Please put up a PR and we will give it a review.

[melvin-bot]

📣 @errahsoufiane You have been assigned to this job by @neil-marcellini!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

⚠️ Looks like this issue was linked to a possible regression on PRODUCTION here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a production regression has occurred a Root Cause Analysis is required. Please follow the instructions here.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[neil-marcellini]

The PR has been merged, what's the status on payment?

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.88-15 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix "Unable to move cursor (left/right) in searchbar" #10304

If no regressions arise, payment will be issued on 2022-08-30. 🎊

[dylanexpensify]

We need applications to the job FYI!

[dylanexpensify]

@vladnyk @parasharrajat any updates here on applying for the job?

[parasharrajat]

I am having trouble applying. Could you please send an invitation?

[dylanexpensify]

Sure can!

[dylanexpensify]

@parasharrajat sent!
@daraksha-dk mind applying for the reporting payment?

[melvin-bot]

@parasharrajat, @neil-marcellini, @dylanexpensify, @vladnyk Whoops! This issue is 2 days overdue. Let's get this updated quick!

[dylanexpensify]

not overdue

[dylanexpensify]

@parasharrajat @daraksha-dk sent offers!

[dylanexpensify]

payments sent, post closed!