[Webkit-unassigned] [Bug 273618] New: AX: previous/next button becomes disabled although sequential input fields exist

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=273618

            Bug ID: 273618
           Summary: AX: previous/next button becomes disabled although
                    sequential input fields exist
           Product: WebKit
           Version: Safari 17
          Hardware: iPhone / iPad
                OS: iOS 17
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Forms
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ruud007 at hotmail.com
                CC: cdumez at apple.com, wenson_hsieh at apple.com

Created attachment 471251

  --> https://bugs.webkit.org/attachment.cgi?id=471251&action=review

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?

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240502/8bdcbd02/attachment.htm>