Add 'required' attribute about ember-cli-selectize HOT 8 CLOSED

What is the expected behaviour? Adding a required attribute?

from ember-cli-selectize.

{{ember-selectize required=true}}

Would pass required to the underlying <select> which would prevent a form submit.

from ember-cli-selectize.

Fixed in 1871455
Please update to latest version.
Let me know if you have any problems. Thanks.

from ember-cli-selectize.

Works partially, it doesn't submit the form, but it also doesn't show a tooltip saying that this field is required..

from ember-cli-selectize.

but it also doesn't show a tooltip saying that this field is required..

Is this something related with ember-selectize or Selectize itself?

Here's a jsbin with selectize only and required attribute: http://jsbin.com/yoqohadewo/1/edit?html,js,console,output

Nothing really happens. Feel free to change the JSBin if you know how to replicate the expected behavior.
Isn't this a question of styles/theme?

from ember-cli-selectize.

http://jsbin.com/lisucupaka/1/

Hit "Submit" without selecting an option.

from ember-cli-selectize.

Ok, gotcha.

The thing is that Selectize is a wrapper around a select element. If you inspect the DOM, you can see the underlying select has the style display:none. What you see with selectize is actually a div that "proxies" or "reflects" to that select element.
That tooltip you see in your JSBin is part of the native select browser features. It may even be different in some browsers, for example.

Selectize's support for required was done in this PR selectize/selectize.js#136.

Basically:

• If the underlying select has required attribute, selectize adds the required class to the wrapper
• If a submit is attempted while no value was chosen, selectize adds an invalid class to the wrapper (listens to the invalid event)
• The styling is up to the developer/theme to do

Check this JSBin: http://jsbin.com/cewesuviqa/1/edit?html,js,console,output
Try to submit and then inspect the DOM. Both required and invalid classes are added.

Ember-selectize focuses on bringing the features of selectize to Ember. This is clearly out of this project scope. But even for Selectize, I don't see a way to do what you need without styling this "invalid" state yourself.

Bootstrap, for example, has styles for these invalid states on all its form controls.
Hope I was clear enough.

from ember-cli-selectize.

Even after updating to the latest version, I am still having problems with this. Why not remove the "required" attribute on the original element? It is still being targeted for focusing and failing if empty on submit, causing browser errors in the console.

from ember-cli-selectize.