iPadOS 15 Beta: WebView: Dropdown (Popover) user experience changes are not pleasant.
We are seeing an issue with WebKit and iPadOS Safari.
Feedback that we are reporting here is Incorrect/Unexpected Behaviour of the dropdown
Our application is developed using Cordova iOS Platform (Hybrid App). In our application, we have a form where user taps on a select dropdown. Here in this case there is an HTML tag which opens up the native popover (dropdown). If the list has more number of data than the native drop down which appears in iPadOS 15 beta, acquires the whole screen i.e. from top to bottom covering its selected field, It is not showing popover indicative visual and also the width of the dropdown is reduced. (Please refer attached image 'dropdown(iOS15).png' for a reference)
This experience has been very unlike if we compare with the iPadOS 14 and lower versions. Previously on iPadOS14 the dropdown was used to appear from the selected field itself. The data inside it was fitted properly with proper width of the dropdown, also the popover indicative is present from the field. (Please refer attached image 'dropdown(iOS14).png' for a reference)
I have attached screenshots of a Cordova Sample App which shows the dropdown behaviour on both iPadOS14 and iPadOS15 (beta) devices.
iPadOS Safari update on issue: We have created a custom html file with larger text value inside HTML tag.
We have attached screenshots of both the iOS15 and iOS14 iPad Simulator Safari app.
our customer is raising this flag since the first beta version of iPadOS 15.
We have attached the sample html file code for review.
<!DOCTYPE html>
<html>
<body>
<h1>The select element</h1>
<p>The select element is used to create a drop-down list.</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="This is the new car named volvo">Volvo</option>
<option value="saab">This is the new car named Saab</option>
<option value="opel">This is the new car named Opel</option>
<option value="audi">This is the new car named Audi</option>
<option value="This is the new car named volvo">Volvo</option>
<option value="saab">This is the new car named Saab</option>
<option value="opel">This is the new car named Opel</option>
<option value="audi">This is the new car named Audi</option>
<option value="This is the new car named volvo">Volvo</option>
<option value="saab">This is the new car named Saab</option>
<option value="opel">This is the new car named Opel</option>
<option value="audi">This is the new car named Audi</option>
<option value="This is the new car named volvo">Volvo</option>
<option value="saab">This is the new car named Saab</option>
<option value="opel">This is the new car named Opel</option>
<option value="audi">This is the new car named Audi</option>
<option value="This is the new car named volvo">Volvo</option>
<option value="saab">This is the new car named Saab</option>
<option value="opel">This is the new car named Opel</option>
<option value="audi">This is the new car named Audi</option>
<option value="This is the new car named volvo">Volvo</option>
<option value="saab">This is the new car named Saab</option>
<option value="opel">This is the new car named Opel</option>
<option value="audi">This is the new car named Audi</option>
<option value="This is the new car named volvo">Volvo</option>
<option value="saab">This is the new car named Saab</option>
<option value="opel">This is the new car named Opel</option>
<option value="audi">This is the new car named Audi</option>
<option value="This is the new car named volvo">Volvo</option>
<option value="saab">This is the new car named Saab</option>
<option value="opel">This is the new car named Opel</option>
<option value="audi">This is the new car named Audi</option>
<option value="This is the new car named volvo">Volvo</option>
<option value="saab">This is the new car named Saab</option>
<option value="opel">This is the new car named Opel</option>
<option value="audi">This is the new car named Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the server called "action_page.php".</p>
</body>
</html>
Is there any change that we have to make for HTML tag? Can some one guide us on this issue? OR We can expect a fix on this issue from Webkit team in future iPadOS 15 releases?
