Selected text label for enhanced select components

[ajalexander]

RMWC Version 8.0.3

The enhanced version of the <Select> component allows for labels to be JSX elements in addition to strings. For example, the code below:

      <Select
        enhanced
        options={[
          { label: <div><div>Cookies</div> <div>Example 1</div></div>, value: "1" },
          { label: <div><div>Pizza</div> <div>Example 2</div></div>, value: "2" },
          { label: <div><div>Icecream</div> <div>Example 3</div></div>, value: "3" },
        ]}
        value="1"
      />

When used this way, however, there doesn't seem to be a way to control what is displayed as the text when the menu is closed.

Binding something to value would have controlled this at one point, but the bug fix in #801 changed the code so that it will always find the selected item and use the textContent of the node for the selected text. Given the example above, Cookies Example 1 would end up being displayed in the UI.

The desired use case would be to have a more complex menu item structure for display but to still use a simple string representation for the collapsed state.

There are two possibilities I've considered for fixing this:

1. Adding an optional display text field to the options
   • Updating the FormattedOption definition for selects include a selectedDisplayText field
   • In the foundation code, if the selected option has selectedDisplayText set use it instead of the textContent
2. Adding an optional function to set the selected text
   • Updating the SelectProps to include a function that accepts a FormattedOption and returns a string
   • In the foundation code, if the component has a text selection function use it to determine the text to display instead of textContent

Before making a change and submitting a PR:

1. Is this functionality already possible without a change?
2. If not, which of the two approaches best matches usage patterns of the library?

[jensborch]

@ajalexander Sorry for not getting back to you sooner. We've been occupied with the release of version 14. While we hope to address your issue soon, there are still a few bugs on our priority list that need attention. Feel free to submit a pull request – contributions are always welcome!