Ion-select custom item

Ionic Framework Ionic React
1

We use IonSelect (ion-select: Select One or Multiple Value Boxes or Placeholders) and would love to customize the IonSelectOption item content. But when we place any extra html/components inside the IonSelectOption, nothing gets rendered in the item except for simple text:

<IonSelectOption
       className='da-select-item' 
       key={item[valueExpr]} 
       value={item[valueExpr]}
>
   <span className='da-select-item-text'>
      {item[displayExpr]}
   </span>
</IonSelectOption>

The span never gets rendered, nor any other html we try to put into the IonSelectOption component. Anyone knows how to render custom html inside the IonSelectOption?

2

So we don’t actually use any of the html content when we create the select options, we just grab the textContent and render that. Any custom html is ignored.

This is most likely done so we can maintain consistent styling with ion-select and maintain user expectations

3

Ok, that’s a bit disappointing but thanks for the explanation. We’ll have to find another way