Required field cannot be focused

[jbrooksuk]

If the original element is required, Selectize will correctly copy the property. If the user doesn't fill in the field and tries to submit the form, then the browser will try to focus the field to alert the user to their error.

Selectize doesn't seem to respond to this, resulting in a console error of An invalid form control with name='input_name' is not focusable.

It seems that the browser (at least Chrome) won't (correctly) send focus to hidden elements, so really Selectize needs to remove the required property from hidden fields and respond to a focus event.

[jbrooksuk]

My mistake, Selectize doesn't copy the required field. It should though.

[jbrooksuk]

@brianreavis is Selectize going to be copying the required property any time?

[sjhewitt]

I just came across this problem too. I don't think copying the required attribute is the right option (where do you copy it to?!?!)

I've started playing around with listening for the invalid/change events on the original select element, and applying the focus accordingly:

(in the setup method)

self.$input.on('invalid', function(event) {
    event.preventDefault();
    self.focus(true);
    self.$wrapper.addClass("invalid");
});

self.$input.on('change', function(event) {
    if (event.target.validity && event.target.validity.valid) {
        self.$wrapper.removeClass("invalid");
    }
});

I'll create a branch and add some tests tomorrow... there are some issues around handling the way chrome (and possibly other browsers) focus the elements in the form after validation.

[jbrooksuk]

I'd say that you copy it to the element in which the user types into.

[sjhewitt]

I've created a pull request here: #136