Issue #2075: Fix client-side validation

[jhedstrom]

Summary

Fixes issue #2075 by not setting display: none and instead leaves the element focusable for browsers that implement client-side validation.

Please double-check that:

• [x] All changes were made in CoffeeScript files, not JavaScript files.
• [x] You used Grunt to build the JavaScript files and tested them locally.
• [x] You've updated both the jQuery and Prototype versions.
• [x] You haven't manually updated the version number in package.json.
• [x] If necessary, you've updated the documentation.

[PaddyLock]

When will this fix be merged please?

[stof]

.hide() in Prototype also sets the display to none, meaning it is also affected

[jhedstrom]

I've updates the Prototype js as well to use the position/opacity fix.

[jhedstrom]

Any thoughts on this?

[yairEO]

I've solved it myself by instead of .hide just adding a class chosen-master :)

chosen.jquery.js

this.form_field_jq.addClass('chosen-master').after(this.container);

CSS is:

.chosen-master{ position:absolute; z-index:-1; visibility:hidden; }

[jhedstrom]

@stof anything else to do here?

[acbramley]

This is still affecting Drupal form submissions for required fields https://www.drupal.org/node/2705891

[gambry]

Is there anything left in order to make progress on this issue? Bug is quite annoying and PR has been pending feedback since Aug 2016.

[markconroy]

I would love to see this fixed. It's popped up as an issue on a Drupal site I am building but the patch in https://www.drupal.org/node/2705891 didn't seem to help.

[jonathanbull]

This looks good. How can we get it merged?

[zonky2]

I use

.chosen-master {
  display: inline-block !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
}

works with BS4

[damsalem]

I used @yairEO JS to add a class and @zonky2 CSS for the win!

After that, my required select with a multiple attribute began to work with the browser's validator.

Here's what that looked like for Chosen v1.8.7:

1. Open chosen.js and on line 199 locate this: this.form_field_jq.hide().after(this.container),

2. Replace that with this: this.form_field_jq.addClass('chosen-master').after(this.container),

3. Add these CSS attributes to that class:

.chosen-master {
  display: inline-block !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
}

[DieterHolvoet]

With the above CSS, Firefox still displays the outline of the hidden field. Adding opacity: 0 fixes that.