Multiselect May Break When Values are Strings With Certain Characters

[iamjohnford]

The multiselect example code uses integers for the values of the fields but when using strings with certain characters like ' the JavaScript can sometimes have trouble. Issues may also appear with > due to character encoding when the chip partial is trying to find a match.

To Reproduce

Add something like this to the multiselect_prefilled_form example:

display: Test Option
value: Contriv'ed > Example

May need to try with Test Option preloaded and also try to add/remove it from the list.

Certain code like the following will break because value contains a quote and would need escaping:

  // options.js
  _optionElementWithValue(value) {
    return this._actingListbox.querySelector(`[${this.filterableAttributeValue}][data-value='${value}']`)
  }

[josefarias]

Hey @iamjohnford thanks for the report. I'm curious — what's the use-case for this? What are you using as your values?

[iamjohnford]

It's a fairly unique scenario with some imported client data from an external system without ids attached to the text. So, the key and value of the list are both the text value. We actually had data that looked like the example I mentioned just with real client data (Contriv'ed > Example). There were apostrophes and greater than symbols.

I realize this scenario might be a bit too unique to make coding changes for.

[josefarias]

I see. Thanks for sharing. I'll explore how much the code would need to change. I don't see a reason not to support this unless it requires too much code.

In the meantime, I wonder if encoding your values in a deterministic way would be a good stopgap. I haven't used it, but https://github.com/hopsoft/universalid might be a good option. Or just a plain-old native URL/base64 encoding.

I'll keep this open as a reminder to explore this.