HTML <select> stops firing onchange or onblur when iOS 11 Webview loses focus

Question

I am developing a Hybrid (web+native) app for iOS. The web part of the app is a SPA within a WKWebView (which is on a UINavigationController). The website has a <select> element with an onchange/onblur handler. When the user taps the <select> element, the native picker wheel appears. Then, when the user taps the Done button of the native picker, the onchange and onblur handlers are fired immediately. This all works as expected.

As this is a hybrid app, there are times when the app pushes a view controller on to the UINavigationController (on top of the web view). When that view controller is popped and focus is returned to the web view, everything appears to work as it did before.

However, the <select> elements will now only fire the onchange and onblur events when the user taps away from the element. If the user updates their selection and taps Done, the picker will dismiss but the value of the select element remains unchanged. Only after tapping outside of the element will the value update and the onchange/onblur events fire.

It doesn't matter when the new view controller is pushed and popped, even if it is before the <select> element has been created yet. If at any point during the web view's lifecycle it is covered up by a new view controller, this bug will occur 100% of the time until the webview is destroyed.

Sample code (nothing really special here):

HTML:

<select id="mySelect">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

JS:

document.getElementById("mySelect").onchange = function() {
    console.log("hello");
}

This issue only occurs for iOS 11 and 12. Is it a bug specific to Mobile Safari? Any help would be much appreciated.

Answer 1

I recently found that if you add optgroups to the select, the events seem to fire correctly. I've been appending empty ones to the select and that appears to be working for now.