Customize ld-select selected options rendering

[dpitois]

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]

Hi @dpitois
I have created a feature request from your question and am working on a solution right now. Will let you know there, as soon as I have a solution.
🙌

[borisdiakur]

@dpitois It's working now with @emdgroup-liquid/liquid v5.2.0: https://stackblitz.com/edit/github-fvtkeq-dbreyw?file=package.json%3AL6