Skip to content

HTML comments nested within option tags are copied into choices items #1231

@ActuallyACat

Description

@ActuallyACat

Describe the bug
When there are HTML comments within select options, this content is copied into the choices items.

For my particular use case, the initial select and option tags are generated by Lit which adds some metadata in the form of HTML comments to manage dynamic content.
E.g.

<select>
  <!--?lit$486671054$--><!---->
  <option value="asl"><!--?lit$486671054$-->American Sign Language</option>
  <!---->
</select>

To Reproduce
I've made a minimal reproduction in Codepen: https://codepen.io/actuallyacat/pen/WbeNWeg

Or you can refer to this snippet:

<select id="choices-example" class="form-control" placeholder="This is a placeholder" multiple>
  <option value="">
    <!-- HTML comment 1 -->
    Select an option
  </option>
  <option value="dog">
    <!-- HTML comment 2 -->
    Dog
  </option>
</select>
<script> 
document.addEventListener('DOMContentLoaded', function() {
  let choicesConfig = new Choices('#choices-example');
});
</script>

Expected behavior
I would expect that any non-text content within the options would be filtered out.

Screenshots
Screenshot 2024-11-28 at 11 28 04 AM

Choices version and bundle

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions