Select Dropdown is not working on iPhone iOS version 14.6 in Safari Browser

EDIT (Aug 13, 2021)

This is Apple's response to the bug report.

Engineering has provided the following information regarding this issue:

Please know that this is fixed in iOS 15, as we changed the UI for <select> elements.

iOS 15 beta 5 (19A5318f) https://developer.apple.com/download/

---

For a complete list of logging instructions visit: https://developer.apple.com/bug-reporting/profiles-and-logs/

I've tested iOS 15 Beta in the Xcode simulator, and this is not an issue. So with the next release of iOS this will hopefully be resolved for anyone else who was having trouble.

Original Answer

It seems this is likely an issue with the latest iOS release.

I will submit a bug to Apple and update this answer with what I hear from them.

Our Angular 1.x application was working fine until 14.6 was released, then iPhones specifically started having issues, both in Chrome and Safari (Android appears unaffected, and desktop computers also work fine. As far as we know, this is only a problem with iOS). When the user selects an input from the drop-down and then presses "Done", it updates the selection only sometimes. Most of the time, the old option remains selected, but occasionally, it will be updated with the new one. Using the up/down arrows seems to work only slightly better, but still only persist the selection sometimes.

I am able to reproduce the problem using the simple example below. Testing shows that running Angular 1.x and certain other dependencies on iOS 14.5 or 14.6 causes the problem. Angular 1.x by itself does not cause a problem.

Known dependencies that cause problems so far:

Onsen UI version 1.3.17. (version 2.11.2 seems to work fine).

    <!doctype html>
    <html ng-app="myApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="https://unpkg.com/onsenui@1.3.17/js/onsenui.min.js"></script>
    </head>
    <body>
    <div ng-controller="BasicCtrl">
        <select>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
        </select>
        <select ng-model="selectedOpt" ng-options="opt as opt.name for opt in opts">
        </select>
        <div>{{'{name: ' + selectedOpt.name + ', id: ' + selectedOpt.id + '}'}}</div>
    </div>
    <script type="text/javascript">
      var app = angular.module('myApp', []);
      app.config(function() {});
      app.controller('BasicCtrl', function ($scope) {
        $scope.opts = [
          {id: 1, name: "A"},
          {id: 2, name: "B"},
          {id: 3, name: "C"},
          {id: 4, name: "D"},
          {id: 5, name: "E"},
          {id: 6, name: "F"}
        ];
      });
    </script>
    </body>
    </html>

System specs: macOS Big Sur Version 11.4

Model Name: MacBook Pro

Model Identifier: MacBookPro13,3

Processor Name: Quad-Core Intel Core i7

Processor Speed: 2.6 GHz

Number of Processors: 1

Total Number of Cores: 4

L2 Cache (per Core): 256 KB

L3 Cache: 6 MB

Hyper-Threading Technology: Enabled

Memory: 16 GB

XCode simulator:

Version 12.5 (961.1)

SimulatorKit 609

CoreSimulator 757.5

iPhone 12 Pro Max

iOS 14.5

In my index.aspx page I'm using the fastclick.min.js and above the line of code in the document.ready block.

var attachFastClick = Origami.fastclick;
attachFastClick(document.body);  

So basically what I did, trace down the index file from top to bottom for the script code which might be the cause for this dropdown issue. So commented out the line of code that might be the cause for the issue and then tested on iOS 14.6 device for safari browser. As soon as I commented out the code related to fast click and check on iphone iOS 14.6 it starts working.

I'm not sure why the drodown is not working on iPhone iOS 14.6 safari browser when with fastclick.js include.

I had a similar problem. This problem was with angular-material

Tell the AngularJS Material Gesture module to skip (or ignore) click hijacking on mobile devices.

$mdGestureProvider.skipClickHijack();