Choices-js / Choices

A vanilla JS customisable select box/text input plugin ⚡️
https://choices-js.github.io/Choices/
MIT License
6.23k stars 613 forks source link

Required attribute not working on select field #1007

Open otatechie opened 2 years ago

otatechie commented 2 years ago

Describe the bug The required attribute is a boolean attribute. When present, it specifies the user is required to select a value before submitting the form.

Expected behavior If present on any of these input types and elements, the :required pseudo class will match.

Desktop (please complete the following information):

Additional context Required helps provide an indication to users informing them the form control is required. The aria-required attribute indicates that user input is required on the element before a form may be submitted improving accessibility.

mtriff commented 2 years ago

Please provide a simplified code example demonstrating the bug.

otatechie commented 2 years ago
<select class="js-choice">
    <option value="">Please select </option>
    <option value="Red">Red </option>
    <option value="Yellow">Yellow </option>
</select>

<script>
    const choices = new Choices('.js-choice');
</script>
amineo commented 2 years ago

@thehappytechie There appears to be CSS only fix mentioned in #449.

.choices[data-type*="select-one"] select.choices__input {
  display: block !important;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: 0;
  bottom: 0;
}