mozilla-mobile / firefox-ios

Firefox for iOS
Mozilla Public License 2.0
12.15k stars 2.91k forks source link

Bottom Sheet Investigation - Keyboard Interactions #22196

Open data-sync-user opened 1 week ago

data-sync-user commented 1 week ago

┆Issue is synchronized with this Jira Spike

data-sync-user commented 1 week ago

➤ ih-codes commented:

Early findings:

If we use the UIKit built-in https://developer.apple.com/documentation/uikit/uiviewcontroller/3850571-sheetpresentationcontroller ( https://developer.apple.com/documentation/uikit/uiviewcontroller/3850571-sheetpresentationcontroller|smart-link ), we can get a “popover” type effect for iPad and a bottom sheet for iPhone. Using the standard APIs like this is the advised approach for development to work across iPhone and iPad, as it’ll be more reliable than a custom solution (especially with iPad split views) and save on development time.

iPad changes to the iPhone presentation mode while in split view because the size class changes.

iPhone Keyboard interaction:

Keyboard is shown/hidden depending on the focus of the toolbar’s text area. So if the search engine image is tapped, the keyboard closes, and the presentation controller takes over. If you tap outside the presentation controller or slide it closed, the toolbar text area is refocused automatically and the keyboard reappears.

iPad Keyboard Interaction:

  1. Full View

In full screen, the user can continue to type in the toolbar even while the popover is displayed.

  1. Split View

iPad split view keyboard interaction is a bit different than iPhone. The keyboard remains up as long as one of the split views has the toolbar focused. If neither has the toolbar focused (i.e. presentation overlay covering both screens) the keyboard will dismiss.

iPhone:

!iPhone.mp4|width=1178,height=2556,alt="iPhone.mp4"!

iPad full screen:

!iPad - full screen.mp4|width=1640,height=2360,alt="iPad - full screen.mp4"!

iPad Split View:

!iPad - split view and keyboard.mp4|width=1640,height=2360,alt="iPad - split view and keyboard.mp4"!

data-sync-user commented 1 week ago

➤ Michael Verdi commented:

Perfect - that’s how I was hoping it worked.