Chosen: Element XX is not focusable

[ilithium]

Hi all

When submitting a form using the latest version of Chrome and when I have a 'required' attribute on a SELECT (which then implements Chosen UI) I get the following error:

An invalid form control with name='someElement' is not focusable.

This is occurring on forms in Chrome Version 38.0.2125.24 beta (64-bit)

Any suggestions?

Cheers,

Justin

[rdinigel]

I am getting this too.

It seems to be due to the the chosen element either not being recognised as a form element or that the select element is in a hidden state.

My temporary fix is currently using JS validation on my chosen elements on form submit.

Hope this helps.

[spackmat]

We exprience this behaviour, too. Very annoying and there should be a better solution than fixing it manually with JavaScipt. I think, removing the required-attribute from the original select and implementing an own required-validation on form submit should be in the domain of the chosen-script.

[alessani]

+1

[iiepson]

+1 I am facing this issue as well.

[DannyFeliz]

+1

[arstropica]

+1

[Toflar]

Hi everybody,

I'm facing this problem too. I tried to track down the issue and I think it happens only on Chrome and only if the target field is mandatory (HTML5 attribute required). The reason (in my opinion) behind this seems to be the following:

When you enable chosen for a <select> form field, chosen will hide (display: none;) the original select and create its own markup instead. Now, when you don't select any value, Chrome's internal HTML5 validation process (due to the fact there's the required attribute set) will try to focus the select element which chosen hid before. That's why Chrome will tell you it's not focusable. Unfortunately, this kills the whole form functionality so it's a quite severe bug :-(

I think Chosen should not use display:none but rather opacity: 0 or maybe visibility: hidden. I haven't tried it out yet, though. But maybe one of the Chosen devs has a starting point now to dig deeper into this.

[spackmat]

Any news on this problem? Required selects are still unusable in Chrome, since the users cannot submit the form and neither see any errors, when they don't select an option.

I tried opacity: 0; width: 0; height: 0; position: absolute; instead of display: none and this works as a quick and dirty workaround in our usecase. Chrome points its error message right next to the label, where the transparent select is placed. Not really a good solution but better than nothing.

As I pointed out before, there must be a solution within chosen reflecting the required-state of the original select to the replacement.

[dannytip]

I temporarily fixed this by changing line #638

From

this.form_field_jq.hide().after(this.container);

to

this.form_field_jq.css('position', 'absolute').css('opacity', 0).after(this.container);

Not ideal but this bug was a deal breaker for me.

[spackmat]

We juest switched to Select2 (for AJAX-autocomplete as the main reason, but this bug was also really annoying and a showstopper). Was no big deal and works quite well.

[whyte624]

👍

[pfiller]

Pretty much a discussion of one aspect of #515. Closing in favor of that thread.