Bug 273618 – AX: previous/next button becomes disabled although sequential input fields exist

• Status: NEW
• Component: Forms

[Ruud]

Created attachment 471251 [details]
showing the problem

Problem: With a 100vh/100svh CSS styling in combination with flex styling, the iOS keyboard previous/next button becomes disabled when the next or previous input field is outside of it's view (but still on the HTML visible).

Use case: You have styling in place to have a mobile friendly topbar, bottombar and inner content. Only the inner content should be scrollable (as well as the scrollbar should not go beyond the bottom/top bar). Perhaps in some scenarious you would like the topbar/bottombar to be minimzed, but still it should be 'sticky'.

This leads to strange behaviours, depending on the HTML/CSS configuration:
- When going through input fields a user is not able to go to the next input field although there are more, user has to scroll manually and touch the next input field.
- In an unlucky situation, you could be tapping on input field #1 when input field #2 is still visible to the user, but when the keyboard pops up input field #2 goes behind the keyboard. This results in the next button being active but when clicked on it does nothing.

I've created a test app: https://stackblitz.com/edit/stackblitz-starters-qvtnbz?file=src%2Fapp%2Fpages%2Fflex%2Fflex.component.html

I've tried number of things, but I simply can't get the CSS styling to be correctly in order for this to work, without a lot of other troubles. Above example is an over simplyfied version of a large component eco-system. We've put a lot of effort in making the hybrid apps mobile friendly and cross-platform. Therefor simply changing back to the 'traditional' way of creating webpages isn't possible.

Mind you that this works on Android (14) and Safari and other browser on desktop with tabs perfectly. 

So the question is: Why isn't the keyboard able to 'see' the rest of the HTML beyond it's view?

[Ruud]

Few more notes:

- When running the test app, simply open the traditional page first to see it works on iOS, thereafter go to the flex page and see that it won't work anymore.
- Open the URL on your phone and then running it should work, if not, here is a temporary page to open on your phone to test it: https://tempiostest.z6.web.core.windows.net/

- Not sure if I've put this in the right category, as far as I can tell the problem is within the underlaying functionality of Safari that interacts with the iOS-keyboard.

- I thought it had something to do with `overflow: hidden` but it seems like that doesn't solve the problem.

[Radar WebKit Bug Importer]

<rdar://problem/127802329>