Multiselect works inconsistently when option contains text that resembles an HTML tag

I discovered this while using Chrome (128.0.6613.138) on Windows 11 (23H2 - OS Build 22631.4169).

The following demonstrates an inconsistency in the way the options are handled when they contain text that resembles an HTML tag (even when properly encoded):

<select class="form-multi-select" id="ms1" multiple data-coreui-search="true">
  <option value="0">Regular text</option>
  <option value="1">More &amp; more text</option>
  <option value="2">&lt;Text in angle brackets&gt;</option>
  <option value="3">&lt;Text in angle brackets&gt; with more text</option>
  <option value="4">&gt;Text in reversed angle brackets&lt;</option>
  <option value="5">Text with <b>"bold"</b> text</option>
  <option value="6">2 &lt; 3</option>
  <option value="7">5 &gt; 4</option>
  <option value="8">"foo" &lt;&gt; 'bar'</option>
</select>

Specifically, values 2 and 3 display correctly in the list but do not work correctly if you try to select them individually. The text in angle brackets does not display in the list of selected options. However, if you choose the "select all options" button, they do work correctly (as long as they were not previously selected individually before that).

The other values were various ways I tried to test the issue. While they do appear to work correctly, I think the resulting HTML includes unencoded characters (such as angle brackets and ampersand) in several cases.

The issue appears to be an inconsistency in the way the text is added to the selected options. When "select all options" is clicked, the text is pulled from the internal array of options. However, when selecting an item individually, the text is pulled from the selected element in the DOM instead of pulling from the original text in the options list.

coreui / coreui-pro

Multiselect works inconsistently when option contains text that resembles an HTML tag #540