Selectize.js: Cannot submit form with selectized [required] field in Microsoft Edge

Created on 4 Sep 2017 · 8Comments · Source: selectize/selectize.js

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
[x] 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

In Microsoft Edge (I could only test it on v14), submitting a form doesn’t work when there’s a selectized select inside that has a required attribute. Attempting to submit the form simply does nothing in Edge, while it submits the form as expected in other browsers (IE, Firefox, Chrome). I’ve created a minimal test case here: https://codepen.io/anon/pen/MvxGXd. Just open this example in Edge, click on “Empty” an select an item, then click on “Submit”. It won’t work.

Steps to reproduce:

Write the following markup:

<form action="/api">
  <select name="test1" id="test1" required>
    <option value="">Empty</option>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
  </select>
  <button type="submit">Submit</button>
</form>

Add jQuery and Selectize to the page
Selectize the <select> with

$('#test1').selectize()

Open the page in Edge and select an item in the field
Click on “Submit”

Expected result: It should submit the form because it’s valid.

Actual result: Nothing happens.

Removing the required attribute on the <select> fields makes submitting possible again in Edge. This seems like a weird MS Edge bug. Maybe a workaround for this can be implemented into Selectize. A basic example with a hidden and required select field works in MS Edge (see https://codepen.io/anon/pen/oeVyVM), so it must be something in Selectize that triggers the Edge bug.

no-issue-activity

Source