Selectize.js: Required fields can not be focusable

[oswaldoacauan]

Error: An invalid form control with name=''" is not focusable.
File: /examples/required.html
Browsers: Chrome v40 and Chrome Canary v43
SO: Windows 7

Ref.: #63 and #136

Seems that the issue is back :sweat_smile:

[scaytrase]

Confirm, required inputs become hidden and unfocusable (which leads to submit fail). Also I cannot make the selectized input required.

[conarwelsh]

same here

[therocode]

Also experiencing this

[rudymacias]

Same here.

[seanodotcom]

Seeing this in Chrome 42 as well.

[chibicode]

Same here on Chrome 43.

[Alex-Sokolov]

Some sort of workaround...

Let style invalid selects with red border

.selectize-control.invalid > .selectize-input {
    border-color: red;
}

And in init of each select add code for checking validation

$('select').each(function() {
    var $select = $(this).selectize(options);
    selectizeValidationFix($select);
});

function selectizeValidationFix($select) {

    var self = $select[0].selectize;

    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');
        }
    });

}

Result: no error message in console about "not focusable" and styling invalid selects with red border. But if on page few selects - all opened together

[dexcell]

Yeah, hopefully this bug is going to fixed soon.

I did a quick dirty fix since i also need it. At least it worked for me.
On selectize.js (un-minified) line 2655.

Change the code from

self.$control_input.prop('required', invalid);

to

self.$control_input.prop('required', self.$input.val() == '');
self.$input.prop('required', false);

Use at your own risk. Only tested aganist dropdown style of selectizejs.
Hopefully it help someone.

[oswaldoacauan]

@brianreavis any thoughts on this?

[sintro]

Same problem, "is not focusable" problem is still here

[bogdancss]

any updates on this?

[joallard]

It's not being actively worked on. A PR with tests is most welcome, and '+1' votes (not comments) help determine what's a priority.

[joallard]

I can't repro this in Chrome 52 (Mac). Is this still happening?

[kmarcisz]

This is still an issue. Just tried the examples/required.html on a Mac in Chrome 52, getting the An invalid form control with name='' is not focusable. error.

[joallard]

Getting the error just loading the page? I'm definitely not getting that. It loads without any error.

[oswaldoacauan]

I think you need to submit the form.

On Fri, Jul 29, 2016 at 2:16 PM Jonathan Allard [email protected]
wrote:

Getting the error just loading the page? I'm definitely not getting that.
It loads without any error.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/selectize/selectize.js/issues/733#issuecomment-236238978,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABNbJsqJIpYW5LK-f1AqyCXc9aLKo3dTks5qajVugaJpZM4DsUkO
.

[joallard]

We got a winner!

STR

1. In Chrome (using v51), go to examples/required.html
2. Using the "Required element" example, make sure no option is selected
3. Click Submit

Actual: Thrown "An invalid form control with name='' is not focusable."
Expected: No exception; browser indicates empty field error.

[joallard]

A fix is committed, would someone confirm?

[kmarcisz]

Bug still present on the master branch. Same error, trying to submit an empty form in examples/required.html throws the same exception in console.

[joallard]

@kmarcisz Are you sure you're running the code in src/selectize.js and running the above STR? Because running STR in Chrome 52 doesn't return reported behavior for me.

[fgagne]

@joallard the fix is working on Chrome 52.0.2743.116 m (64-bit) on Windows 10.

I've build the master branch and I don't get the error.
I've build the 0.12.2 tag, I do get the error.

Thanks for fixing this.