Choices-js / Choices

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

refresh() does not take allowHTML into account #1220

Open yubbink opened 1 month ago

yubbink commented 1 month ago

Describe the bug The option allowHTML when creating a choice element allows label to have html input instead of just text. When you call .refresh() on the created choice element after that, it does not render the text inside label as html, but as normal text. Causing html tags to be displayed.

To Reproduce

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/choices.js@11.0.2/public/assets/scripts/choices.min.js"></script>
</head>
<body>
<div>
    <select id="select"></select>
    <button onclick="window.choiceElement.refresh()">Click to refresh</button>
</div>
<script>
    window.choiceElement = new Choices(document.querySelector('#select'), {
        allowHTML: true,
    });

    window.choiceElement.setChoices([
        {
            value: '1',
            label: '<div>Text inside html tag</div>',
            selected: true
        }
    ], 'value', 'label', true)
</script>
</body>

click the button to call the refresh function and you'll see the selected element changing and showing the html tags

Expected behavior You'd expect the html to render instead of plain text

Choices version and bundle Found this bug in 10.2.0 under different circumstances, but as the example shows it is a problem in 11.0.2. Simple example with 10.2.0 version works, so I'm trying to find the underlaying cause for the same issue I'm facing there.