Customize ld-select selected options rendering

[borisdiakur]

Discussed in #633

^{Originally posted by dpitois April 12, 2023}
Hi!

I was looking for available options to customize how the selected options are rendered when using the ld-select (with multiple enabled).
Did not find another issue or question about that, if I missed it, sorry, and I will try to inspire from that.

My need is to render options in the popover using a LaTeX wrapper, and so far for now, I can put custom HTML inside the ld-option, the rendering is working as expected.
But, when we select an option (or more), it looks like only the .innerText part is taken and renderer in parent ld-select component.

Is there a way to take hand on how is rendered this selection?

Example: https://stackblitz.com/edit/github-fvtkeq?file=src%2Fcomponents%2FForm%2FForm.tsx
I took the React sandbox, and just add the following code to the theme option part in order to add a red square:

<div
  style={{
    width: '1em',
    height: '1em',
    display: 'inline-block',
    backgroundColor: 'red',
    marginRight: '1em',
  }}
></div>

It looks OK for the popover:

but only the text part is visible on selection:

[borisdiakur]

🎉 This issue has been resolved in version 5.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

📦🚀