Select element with multiple and optgroup on iphone/ipad acting very strange

hessodreamy · 10-02-2012, 01:23 PM

I've got a page which features a select element with multiple selections allowed, where many of the options are within OPTGROUPs. I've just noticed that on the iphone and ipad, it acts really strangely.

The HTML passes validation in an online validator. And, as far as I can tell, there's nothing strange about it at all. And it all seems to work OK on all major browsers on windows and mac.

However on the iPhone (and, so I'm told, the iPad), it's fine when you select options outside of the optgroup. But selecting items in the optgroup it seems to have a mind of it's own. You can tick, say, 4 items in the gui, but the text on the select box might say '2 items'. And when you choose 'done', and then re-open the select box gui, there might be only 2 items now selected. It does seem to work correctly if you select options near the bottom, and then work your way upwards, but not working downwards.

I've recreated this behaviour on the iphone on safari and chrome. You can see a demo here: http://www.theseveninches.co.uk/select.html. Try it on an iphone and see if it acts strange.

Am I going mental here? Is there something wrong with this HTML or is it apple that's gone nuts? And is there a workaround?

Here's the HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Email</title>
</head>
<body>
	<form action ="email.php" method="post">
		<select name="to[]" MULTIPLE size=10 >
			<option value='staff_1'>hilary</option>
			<option value='staff_2'>shane</option>
			<option value='staff_3'>kath</option>
			<option value='staff_4'>rocky</option>
			<option value='staff_5'>julie</option>
			<option value='staff_6'>simone</option>
			<option value='staff_7'>duncan</option>
				
			<optgroup label='Management'>
				<option value='staff_8'>miles</option>
				<option value='staff_9'>mickey</option>
				<option value='staff_10'>andrew</option>
				<option value='staff_11'>ryan</option>
				<option value='staff_12'>jack</option>
				<option value='staff_13'>ian</option>
				<option value='staff_14'>tim</option>
			</optgroup>
			<optgroup label='Sales'>
				<option value='staff_15'>henry</option>
				<option value='staff_16'>emmy-lou</option>
				<option value='staff_17'>emil</option>
				<option value='staff_18'>jean-pierre</option>
				<option value='staff_19'>john</option>
			</optgroup>
			<optgroup label='Accounts'>
				<option value='staff_20'>katrina</option>
				<option value='staff_21'>donny</option>
				<option value='staff_22'>flo</option>
				<option value='staff_23'>danny</option>
				<option value='staff_24'>chris</option>
			</optgroup>
			<optgroup label='Departments'>
				<option value='dept_1'>Sales</option>
				<option value='dept_2'>Accounts</option>
				<option value='dept_3'>Management</option>
				<option value='dept_'>Everyone</option>
			</optgroup>         
		</select>
	</form>
</body>
</html>

fireplace_tea · 10-02-2012, 05:22 PM

In your open <select> tag you have MULTIPLE capitialized. Try putting it in all lower case letters. It COULD be that whatever version of the iPhone and iPad the users have are having a hard time rendering multiple in all capital letters. It's worth a try.

Another thing to try is in your open <select> tag the name="to[]". You can try taking out the brackets and see if that has any effect.

A third thing to try is you have most property values in single quotes. Try putting them all in double quotes.

My initial guess is that any of the three above could be giving the iPhone and iPad rendering engines a hard time. It's worth a try.

hessodreamy · 10-05-2012, 05:03 PM

Quote:

Originally Posted by fireplace_tea

In your open <select> tag you have MULTIPLE capitialized. Try putting it in all lower case letters. It COULD be that whatever version of the iPhone and iPad the users have are having a hard time rendering multiple in all capital letters. It's worth a try.

Another thing to try is in your open <select> tag the name="to[]". You can try taking out the brackets and see if that has any effect.

A third thing to try is you have most property values in single quotes. Try putting them all in double quotes.

My initial guess is that any of the three above could be giving the iPhone and iPad rendering engines a hard time. It's worth a try.

Good ideas, all of them. However none of them worked! My only plan at this point is to detect an apple user agent and display a simpler form, one without the optgroups. And see if it works.