Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix site icon selection keyboard issue #23181

Closed
wants to merge 3 commits into from

Conversation

guarani
Copy link
Contributor

@guarani guarani commented May 9, 2024

Fixes #21520

The solution I used here is to dismiss the picker (which closes the keyboard) before opening the Resize & Crop screen. I guess many users who change their site icons have run into this bug because they often have lots of images, and the Photos search (which triggers the keyboard) is very useful for finding the image they're looking for.

The Resize & Crop screen is presented over the PHPickerViewController. This is an uncommon way of doing things because the PHPickerViewController is left open after the user selects their media. In other parts of the app where the picker is used, it's dismissed immediately after selection (e.g. uploading to site media, image block, profile photo picker, etc).

Presumably, leaving the picker open saves users time if they want to choose a new image on the Resize & Crop screen. By leaving the picker open, users can move back and forth between the picker and the Resize & Crop screen with little friction.

All the known ways of closing the keyboard don't work with the PHPickerViewController's keyboard, as noted in https://stackoverflow.com/questions/76738328/dismiss-keyboard-for-phpickerviewcontroller-not-working.

With this PR, this is how choosing a site icon works now (see the video at #21520 (comment) for how it worked before):

RPReplay_Final1715283502.MP4

To test

  1. Log in to the Jetpack app
  2. Tap the site icon on the My Site screen
  3. Tap "Choose from Device"
  4. In the image picker, make the keyboard appear by doing a search (⚠️ not available on simulators)
  5. Choose an image
  6. Notice the keyboard is dismissed along with the picker (previously the picker remained open)
  7. Complete the flow through the Resize & Crop screen

Regression Notes

  1. Potential unintended areas of impact

The could inadvertently introduce regressions in the the site icon selection flow

  1. What I did to test those areas of impact (or what existing automated tests I relied on)

Manual testing

  1. What automated tests I added (or what prevented me from doing so)

Since this flow involves the photo picker, I don't think tests are suitable.

PR submission checklist:

  • I have completed the Regression Notes.
  • I have considered adding unit tests for my changes.
  • I have considered adding accessibility improvements for my changes.
  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

Testing checklist (left unchecked the ones that seem irrelevant for this PR):

  • WordPress.com sites and self-hosted Jetpack sites.
  • Portrait and landscape orientations.
  • Light and dark modes.
  • Fonts: Larger, smaller and bold text.
  • High contrast.
  • VoiceOver.
  • Languages with large words or with letters/accents not frequently used in English.
  • Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
  • iPhone and iPad.
  • Multi-tasking: Split view and Slide over. (iPad)

@guarani guarani added this to the 24.9 milestone May 9, 2024
@wpmobilebot
Copy link
Contributor

wpmobilebot commented May 9, 2024

WordPress Alpha📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.
App NameWordPress Alpha WordPress Alpha
ConfigurationRelease-Alpha
Build Numberpr23181-ae58e5a
Version24.8
Bundle IDorg.wordpress.alpha
Commitae58e5a
App Center BuildWPiOS - One-Offs #9862
Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

@wpmobilebot
Copy link
Contributor

wpmobilebot commented May 9, 2024

Jetpack Alpha📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.
App NameJetpack Alpha Jetpack Alpha
ConfigurationRelease-Alpha
Build Numberpr23181-ae58e5a
Version24.8
Bundle IDcom.jetpack.alpha
Commitae58e5a
App Center Buildjetpack-installable-builds #8910
Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

@dangermattic
Copy link
Collaborator

dangermattic commented May 9, 2024

1 Warning
⚠️ This PR is assigned to the milestone 24.9. This milestone is due in less than 4 days.
Please make sure to get it merged by then or assign it to a milestone with a later deadline.

Generated by 🚫 Danger

@guarani guarani requested a review from staskus May 9, 2024 20:03
@guarani guarani marked this pull request as ready for review May 9, 2024 20:03
@guarani
Copy link
Contributor Author

guarani commented May 9, 2024

I just saw a previous PR on this: #21564 (comment), so I'll close this and move the discussion there.

@guarani guarani closed this May 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Media picker: The keyboard overlaps the Resize & Crop screen
3 participants