Skip to content

Search field has neither id nor name, Chrome reports "A form field element should have an id or name attribute" #6472

Open

Description

@neoflex

The search fields Select2 creates have no id and no name. Chrome DevTools lists each one in the Issues panel
as "A form field element should have an id or name attribute" (the browser cannot autofill a field it cannot
identify). This applies to both search fields:

  • the inline <textarea class="select2-search__field"> of a multiple select (src/js/select2/selection/search.js)
  • the <input class="select2-search__field"> in the dropdown of a single select (src/js/select2/dropdown/search.js)

The fields already have an aria-label, so this is not an accessibility failure, but the advisory shows up on
every page that uses Select2.

Steps to reproduce

  1. Open a page with a multiple select enhanced by Select2 (JSBin: https://output.jsbin.com/pizefahoxu):
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>

<select id="fruits" name="fruits" multiple>
  <option>Apple</option>
  <option>Banana</option>
</select>
<script>$('#fruits').select2();</script>
  1. Open Chrome DevTools, Issues panel.

Expected: no issue; the search field has an id derived from the select, as the other generated elements
already do (select2-fruits-container, select2-fruits-results).

Actual: "A form field element should have an id or name attribute", 1 resource: the
textarea.select2-search__field.

Suggestion: give the search field an id from the container id Select2 already generates
(_generateId in core.js), for example select2-<id>-search for the inline field and
select2-<id>-dropdown-search for the dropdown one. A name would be worse: the field would then be
submitted with the form.

Versions: Select2 4.1.0 (also 4.1.0-rc.0), jQuery 3.7.1, Chrome 155.0.8059.84, macOS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions