Bug 242060

Summary: REGRESSION (iOS 14.5+): Accessory bar next/previous buttons do not detect inputs that overflow
Product: WebKit Reporter: Sean Perkins <sean>
Component: DOMAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: jamiewarb, jnorton, jose, manasa.talluri, megan_gardner, saimanogna.pentyala1, webkit-bug-importer, wenson_hsieh
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: iPhone / iPad   
OS: iOS 14   
Attachments:
Description Flags
the recording which shows the form with input and ion-select fields none

Sean Perkins
Reported 2022-06-28 08:32:00 PDT
Starting in approximately iOS 14.5.*, Mobile Safari no longer detects input elements for the navigation buttons within the accessory/quick type bar, if they overflow. This problem is not reproducible in iOS 14.4 and earlier. Reproduction: 1. Visit: https://codepen.io/sean-perkins-ionic/pen/QWmLPPX on Mobile Safari (iOS 14.5.0 or later) 2. Tap the first input to draw focus to the input and present the keyboard 3. Observe: The next button is enabled in the accessory/quick type bar 4. Tap the next button to advance to the next focusable input 5. Repeat Step 4 until the next button becomes disabled 6. Manually scroll the container to bring inputs that were overflowed, into the visible viewport 7. Tap the previous button on the accessory/quick type bar 8. Observe: The next button becomes enabled 9. Tap the next button multiple times 10. Observe: Inputs that previously would not receive focus, will receive focus until you reach the start of the new overflowed elements. Expected: The next/previous buttons should be able to focus input elements in a scroll container that are overflowed.
Attachments
the recording which shows the form with input and ion-select fields (20.81 MB, video/quicktime)
2024-11-06 09:03 PST, manasa 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2022-06-28 10:38:10 PDT
<rdar://problem/96073691>
José
Comment 2 2022-09-29 07:32:13 PDT
We are facing the same issue here whilst developing a mobile app with the Ionic Framework. We reached out to Ionic who suggested to use Capacitor's Keyboard Plugin (https://capacitorjs.com/docs/apis/keyboard) specifically the setAccessoryBarVisible() method. This should be detected automatically on iOS. Additionally, the return button on the iOS keyboard should scroll down to the next input field automatically. We are still facing this issue.
Jamie
Comment 3 2022-10-11 03:33:46 PDT
I'm also having this problem
Jeff Norton
Comment 4 2022-12-09 11:19:45 PST
We are also facing this issue in a B2C app with ~275k impacted users.
Sai Manogna pentyala
Comment 5 2024-09-09 08:30:30 PDT
We are facing the same issue in a federal government app which has nearly ~1M impacted customers.
manasa
Comment 6 2024-11-06 09:03:44 PST
Created attachment 473153 [details] the recording which shows the form with input and ion-select fields
manasa
Comment 7 2024-11-06 09:05:50 PST
We have a form with input fields and ion-select drop downs there is no next on the keyboard. so the impact is when the user talkback or voice over is ON they have to close the keyboard to navigate to next field. So if we solve this , not only for input fields even for the fields which require user input based on that if we show the Next button on keyboard it helps the Accesibility
Note You need to log in before you can comment on or make changes to this bug.