iPhone does not display options in an HTML select

We are developing a website that uses HTML select and option elements to display customer selectable product options. The site works on all devices browsers except on iPhones. Width does not seem to be the issue because switching to landscape mode so there is more display space makes no difference. When the user taps on the dropdown, the page scrolls which tells me that the browser is making room for the list, but the list does not appear.

The HTML looks like this:
<select id="32" name="32" class="bundle-options" onchange="captureSelection(32, this.selectedIndex);" onfocus="this.selectedIndex = -1; this.blur();">
<option value="1">Select One</option>

<option value="17">Nude Easy Expression - Small</option>
<option value="18">Nude Easy Expression - Medium</option>
<option value="19">Nude Easy Expression - Large</option>
<option value="20">Black Easy Expression - Small</option>
<option value="21">Black Easy Expression - Medium</option>
<option value="22">Black Easy Expression - Large</option>
</select>

We are up against a go/no go decision, so I would really appreciate any help that could be offered.



onfocus="this.selectedIndex = -1; this.blur();" is preventing the options from being shown on iOS.

You can fix the issue by removing the call to blur().
iPhone does not display options in an HTML select
 
 
Q