Fixes #81 Allow native browser validation to work as expected

[maciej-laskowski]

By changing the way slim-select hides the original select tag we can let the native browser validation work as expected. Right now if a required attribute is present on the select that we apply slim-select to and user does not make any selection the browser will block form submission without displaying any message or even scrolling to the element that caused a validation error. See example: https://jsfiddle.net/3jf0o6vp/

This small change fixes the problem I stumbled across some time ago and later mentioned in #81. It is inspired by the way Bootstrap 4 deals with similar issue and should work in all browsers targeted by slim-select.

// Checkbox and radio options
//
// In order to support the browser's form validation feedback, powered by the
// required attribute, we have to "hide" the inputs via clip. We cannot use
// display: none; or visibility: hidden; as that also hides the popover.
// Simply visually hiding the inputs via opacity would leave them clickable in
// certain cases which is prevented by using clip and pointer-events.
// This way, we ensure a DOM element is visible to position the popover from.
//
// See twbs/bootstrap#12794 and
// twbs/bootstrap#14559 for more information.

.btn-group-toggle {

.btn,
.btn-group > .btn {
margin-bottom: 0; // Override default <label> value

input[type="radio"],
input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

}
}

Source file: https://github.com/twbs/bootstrap/blob/v4.2.1/scss/_button-group.scss

[maciej-laskowski]

@brianvoe So I guess my solution does not work?

[brianvoe]

I responded in a github issue but essentially it popped up a couple of other issues that weren't worth the alternative, which is to just use beforeOnChange for validation checks.