Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bootstrap’s invalid feedback is disabled by selectize #1784

Open
1 task
mauricev opened this issue Apr 8, 2022 · 1 comment
Open
1 task

bootstrap’s invalid feedback is disabled by selectize #1784

mauricev opened this issue Apr 8, 2022 · 1 comment
Labels
pending review This issue was closed as stale; since then additional review has been requested.

Comments

@mauricev
Copy link

mauricev commented Apr 8, 2022

I did:

  • [ x] Search for if my issue has already been submitted
  • [ x] Make sure I'm reporting something precise that needs to be fixed
  • [ x] Give my issue a descriptive and concise title
  • Create a minimal working example on JsFiddle or Codepen
    (or gave a link to a demo on the Selectize docs)
  • [ x] Indicate precise steps to reproduce in numbers and the result,
    like below

Bootstrap (4) provides an adornment to required items by way of the invalid-feedback class when the item was not filled in or set. It does not work for selectized elements.

Steps to reproduce:

  1. Create a selectized dropdown inside a form with some items to choose from
  2. Give it the required attribute
  3. Put in an enclosing div tag with itself and an invalid-feedback div tag (per bootstrap 4)
  4. The form should be setup with class="needs-validation" novalidate
  5. Do not select any items in the selectized dropdown
  6. Attempt to submit the form

Expected result:
The invalid feedback should display and the form should not be accepted

Actual result:
The invalid feedback never even engages. Repeat the steps above without selectizing the select element and you do you get the invalid-feedback.

@risadams risadams added the pending review This issue was closed as stale; since then additional review has been requested. label Apr 13, 2022
@fabienwnklr
Copy link
Contributor

fabienwnklr commented Sep 30, 2022

So, the first step of the cause of this error it's in function refreshValidityState the required attribute is removed from the native select or input element (cf : https://github.com/selectize/selectize.js/blob/master/src/selectize.js#L1806) added by this commit from 6 years..

  1. So if i remove this line the message is displayed, maybe first step are to remove this ? Is this line still necessary?
  2. but there is still a problem : selectize input donc have error style cause Bootstrap use .custom-select OR .form-select and :invalid CSS selector and it's available only any or other elements , the only one solution i found would be to listen to the invalid event and apply the desired style to the control-input div

Valid codepen for example

Hope this help.
Feel free to suggest solutions I wouldn’t have thought of.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pending review This issue was closed as stale; since then additional review has been requested.
Projects
None yet
Development

No branches or pull requests

3 participants