Dropdown boxes not working as expected on settings page

[alex-ye]

Open the new bbPress settings page, and try to change the default user role, or the nested replies depth.

It's hard, right?! because you have to hold on the mouse to change the select option, How many users will know this? I think we should remove the checkbox label or do something smarter.

Any ideas?!

[johnjamesjacoby]

Seems fine to me, and mirrors WordPress's core behavior. Moving to future release pending discussion and a patch.

[mordauk]

Works with a single click for me.

[alex-ye]

Replying to johnjamesjacoby:

Seems fine to me, and mirrors WordPress's core behavior. Moving to future release pending discussion and a patch.

WordPress doesn't include the select element in the checkbox label!
Can you give an examples?

[alex-ye]

Replying to mordauk:

Works with a single click for me.

hmm.. strange!

Did you understand the problem?
When you change the select value, the checkbox is clicked at the same time!

[netweb]

When 'left clicking' a select drop down form control the list automatically collapses without you being able to select an item from the drop down list. To select an item you must hold the mouse left click action and move the pointer to the option value of choice then release the left click to have option value populated.

Confirmed in Google Chrome Canary Version 31.0.1610.5 canary Aura SyzyASan Windows x64

'Works for me' as expected with Google Chrome Version 29.0.1547.57 Windows x64

I couldn't find the issue over here: ​https://code.google.com/p/chromium/issues/list

@alex-ye If you are only seeing this with Chrome Canary on Window I think this ticket can be closed.

[netweb]

via @ alexvorn2 Duplicate #2398

Me using Firefox 23.0.1
OS - Windows 7 64b

To replicate:
go to settings page of the wp-admin/options-general.php?page=bbpress and try to open a select box

What happens:
The dropdown boxes closes ofter the click.

What should happen:
The dropbox should show after the click.

Cause:
Select tag <select> is inside <label> tag that has a value names for,
so, clicking the dropdown box simulates clicking the checkbox and the dropdown box too.

For what is for value:
"A label that is associated with a control via for will be clickable. Clicking it selects the control. Highly useful with radio/checkboxes in particular. It also has accessibility implications for screen readers for the visually impaired."

[alex-ye]

@netweb I test it on Firefox 23

[netweb]

Updating current tests

Works as expected in:

• Google Chrome - Version 31.0.1650.63 m
• Google Chrome Canary Version 34.0.1758.0 & 34.0.1763.0
• Opera Version 12.12 & 12.16

Does NOT work as expected in:

• Firefox Aurora - Version 25.0a2 (2013-08-21) & 28.0a2 (2013-12-27)

I think this behaviour is more quirks related and open to broad interpretation by the browsers within the context of multiple label and input nested elements.

Either way incoming patch mimics WordPress' settings/options behaviour.

[netweb]

In ​2392.2.diff wrap each input element with its own label element.

Eg. WordPress Option 'Enable threaded (nested) comments` ​/wp-admin/options-discussions.php#L75

Works as expected in:

• Google Chrome - Version 31.0.1650.63 m
• Google Chrome Canary - Version 34.0.1758.0 & 34.0.1763.0
• Opera - Version 12.16
• Firefox Aurora - Version 28.0a2 (2013-12-27)

[netweb]

In r5242:
For single admin settings that contain both checkboxes and select drop-downs, use two labels. Fixes poor UX in some browsers. Props netweb. Fixes #2393. (trunk)

In r5243:

For single admin settings that contain both checkboxes and select drop-downs, use two labels. Fixes poor UX in some browsers. Props netweb. Fixes #2393. (2.5 branch)