[$2000] mWeb/Safari -The list of countries opens in different sizes when clicking on different lines

[kbecciv]

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. Log in with a brand new account in iOS/ Safari
2. Navigate to Settings -> Profile -> Personal details->Home address
3. Click Country (a large file will open)
4. Сlick Address line 1 then click Country again. (a small sheet opens)

Expected Result:

The sheet with the list of countries should open in the same size

Actual Result:

The list of countries opens in different sizes when clicking on different lines

Workaround:

Uknown

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.2.87.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

Bug5981157_country_16.03.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/~011bc5d3c6e8254d08
• Upwork Job ID: 1637850559436447744
• Last Price Increase: 2023-04-03

[MelvinBot]

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

[MelvinBot]

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

[anmurali]

Reproduced only on iOS/Safari

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~011bc5d3c6e8254d08

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[adelekennedy]

It's not the same issue but these two seem like they could have a similar fix?

[hohner2008]

For the sorting issue we must use _.sortBy instead of _.map .

[MelvinBot]

📣 @hohner2008! 📣

Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[s77rt]

@hohner2008 Thanks for your interest but can you please follow the proposal template? (checkout contributing guide)

[hellohublot]

Proposal

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

mWeb/Safari -The list of countries opens in different sizes when clicking on different lines

What is the root cause of that problem?

When switching from an input to a select, the keyboard is not hidden yet, so the select popup list box can only occupy half of the screen height

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

We can hide the keyboard before popping up the list box. In fact, the browser will hide the keyboard, but we hide the keyboard in advance so that the browser can correctly calculate the height of the list box

https://github.com/Expensify/react-native-picker-select/blob/84ee97dec11c2e65609511eb5a757d61bbeeab79/src/index.js#L580-L592

     selectedValue={selectedItem.value}
     {...pickerProps}
+    onPointerUp={(event) => {
+        Keyboard.dismiss();
+        if (pickerProps.onPointerUp) {
+            pickerProps.onPointerUp(event);
+        }
+    }}

What alternative solutions did you explore? (Optional)

None

[aswin-s]

Proposal

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

Country picker dropdown size differs when soft keybord is open on iOS Safari.

What is the root cause of that problem?

When user directly taps on the country picker, soft keyboard is not present and browser makes use of entire browser height to render the select dropdown. Once user focus any of the other inputs, soft keyboard opens up and reduces the available screen height of the page. Now if user tries to open country picker browser renders a smaller select dropdown because of reduced screen height.

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

This issue is not specific to Country picker but applicable to Picker component in general. Soft keyboard should be dismissed before opening select dropdown. Otherwise browser will render a smaller picker component. Picker component is internally using react-native-picker-select which programatically dismiss the Keyboard before opening the modal for platforms other than Web. For web, a native 'Select' input is getting rendered. So we need to close the soft input before opening picker. This could be achieved by listening to onTouchEnd event from picker and blurring active element if it is not select input.

Add touchEnd listener to pickerProps like below

pickerProps={{
onFocus: this.enableHighlight,
...
onTouchEnd: (e) => {
  if (document.activeElement !== e.target) {
   document.activeElement.blur();
 }
}
},

After Fix

after.mp4

[MelvinBot]

📣 @aswin-s! 📣

Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[aswin-s]

Contributor details
Your Expensify account email: mr.aswin@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~010b194c3e145d5456

[s77rt]

@AndrewGable Please leave a link to Slack if a discussion has been opened.

[tjferriss]

@anmurali it looks like I was also assigned to this one somehow after you were initially assigned as the BZ team member. I'm going to un-assign myself now. Let me know if I'm misunderstanding.

[MelvinBot]

@AndrewGable @anmurali @s77rt this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[s77rt]

We have a proposal already but with a slight drawback. Waiting for @AndrewGable's feedback

[s77rt]

Same ^

[AndrewGable]

Ok reviewed the proposal and it seems fine. @hellohublot - Please submit the PR to both the fork and upstream repo.

[MelvinBot]

📣 @hellohublot You have been assigned to this job by @AndrewGable!
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 📖

[s77rt]

@anmurali Please revert the price to $1K

[hellohublot]

@AndrewGable

Hi, I have submitted the PR in Fork and Upstream.

Upstream looks like it hasn't been maintained in a few years.

Could you please help me to review the PR in the fork?

Thanks.

[AndrewGable]

Fork PR was merged

[s77rt]

Looks like react-native-picker-select was updated already by #17456 so no need to merge #16899 But how can we process payments and track regressions since the workflow wont work.

[AndrewGable]

Agree with @s77rt - Change was deployed with a different PR, but we should payout manually.

[AndrewGable]

@hellohublot @s77rt - Please make sure to track this one and make sure all payouts are correct since we are not able to use the automation here.

[hellohublot]

@anmurali Sorry to bother you, but this issue has not been paid yet, it has the same pay date as #16329, due to Expensify Reviewer's delay in doing the merge, so I guess me and C+ Reviewer can have +50% bounty, Thanks

cc: @AndrewGable

[hellohublot]

@anmurali Hello.. Bump^

[anmurali]

@hellohublot can you clarify the amounts that need to be paid out. I see comments about reverting the price to $1000. Is that right?

[hellohublot]

@anmurali Yes, it's right !

[anmurali]

Paid, added the $500 bonus to both as well.