[HOLD] Language picker can’t be focused via keyboard reported by @huzaifa-99

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Go to login screen
2. Try focusing on the language picker with Tab
3. Notice it is not capturing focus

Expected Result:

Language picker should be able to capture focus

Actual Result:

Language picker is not capturing focus

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.2.24-4

Reproducible in staging?: Need reproduction

Reproducible in production?: Need reproduction

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos:

https://user-images.githubusercontent.com/43996225/200724192-3ef7406e-ae5c-4784-b474-aaf94e3abf2a.mp4

Expensify/Expensify Issue URL:

Issue reported by: @huzaifa-99

Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1667952261507929

View all open jobs on GitHub

[melvin-bot[bot]]

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

[pelkonator]

Proposal https://github.com/Expensify/App/blob/main/src/styles/styles.js convert pickerSmall object to a function

- pickerSmall: {
+ pickerSmall: (disabled = false, error = false, focused = false) => ({
        ...
        inputWeb: {
            fontFamily: fontFamily.GTA,
            fontSize: variables.fontSizeSmall,
            paddingLeft: 9,
            paddingRight: 25,
            paddingTop: 6,
            paddingBottom: 6,
            borderWidth: 1,
            borderColor: themeColors.border,
            borderStyle: 'solid',
            borderRadius: variables.componentBorderRadius,
            color: themeColors.text,
            appearance: 'none',
            height: variables.componentSizeSmall,
            opacity: 1,
-          cursor: 'pointer',
+         cursor: disabled ? 'not-allowed' : 'pointer',
            backgroundColor: 'transparent',
+         ...(focused && {borderColor: themeColors.borderFocus}),
+         ...(error && {borderColor: themeColors.badgeDangerBG}),
        },
        ...
-}
+})

This will match current implementation of the picker function in the same file:

   picker: (disabled = false, error = false, focused = false) => ({
        iconContainer: {
            top: 16,
            right: 11,
            zIndex: -1,
        },
        inputWeb: {
            appearance: 'none',
            cursor: disabled ? 'not-allowed' : 'pointer',
            ...picker,
            ...(focused && {borderColor: themeColors.borderFocus}),
            ...(error && {borderColor: themeColors.badgeDangerBG}),
        },
        inputNative: {
            ...picker,
            ...(focused && {borderColor: themeColors.borderFocus}),
            ...(error && {borderColor: themeColors.badgeDangerBG}),
        },
    }),

[thesahindia]

We tackled this at https://github.com/Expensify/App/pull/12500, so let's put this on hold.

cc: @roryabraham

[mateocole]

Moved to hold

[melvin-bot[bot]]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [x] @mateocole A regression test has been added or updated so that the same bug will not reach production again. Link to the GH issue for creating the test here:
• [x] The PR that introduced the bug has been identified. Link to the PR: https://github.com/Expensify/App/issues/12582#issuecomment-1308702427
• [x] @mateocole The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/issues/12582#issuecomment-1308702427
• [x] @mateocole A discussion in #contributor-plus has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [ ] @mateocole Payment has been made to the issue reporter (if applicable)
• [ ] @mateocole Payment has been made to the contributor that fixed the issue (if applicable)
• [ ] @mateocole Payment has been made to the contributor+ that helped on the issue (if applicable)

[roryabraham]

This should be fixed once #12500 is deployed to staging

[conorpendergrast]

https://github.com/Expensify/App/pull/12500 is on Production now. @mateocole could you re-test please and confirm if you can or cannot reproduce, then close or re-label accordingly?

[mateocole]

Tested - fixed, added to testrail.

@roryabraham @conorpendergrast I am not totally sure how the payout works with this issue, since this was already resolved from a separate issue, and there appears to be a separate payout commencing from https://github.com/Expensify/App/issues/11852, can this be closed now?

[roryabraham]

Yes, we can just close this since no contributor was hired to fix it.