JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
<h1>Without select2()</h1>
<p>This would trigger a HTML5 validation error.</p>
<form method='post' action="/echo/html/">
    <select name='test' required>
        <option value="" selected="selected"></option>
        <option value="1">Yes</option>
        <option value="0">No</option>
    </select>
    <input type="submit" />
</form>

<h1>With fix for select2()</h1>
<p>Without the fix this would throw a JS error (<i>An invalid form control with name='test' is not focusable.</i>). No HTML5 validation and no other validation takes place because of the exception.</p>

<form method='post' action="/echo/html/" id="select2">
    <div class="select2-wrapper">
        <select name='test' required='required'>
            <option value="" selected="selected"></option>
            <option value="1">Yes</option>
            <option value="0">No</option>
        </select>
    </div>
    <input type="submit" />
</form>

CSS

.select2-wrapper {
    display: inline-block;
    position: relative;
}

JavaScript

$(document).ready(function() {
    
});