✨(react) add select options custom render

[NathanVss]

Mono

Multi

[changeset-bot]

⚠️ No Changeset found

Latest commit: 913512e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[AntoLC]

Looks good, meets Marsha's needs!

2 remarks:

• height relative to the content
  
• In searchable mode, when we click on the option, the filter stay active so we don't see the ReactNode until we click out of the select

scrnli_10_9_2023_10-53-40.AM.webm

[NathanVss]

Looks good, meets Marsha's needs!

2 remarks:

• height relative to the content
  
• In searchable mode, when we click on the option, the filter stay active so we don't see the ReactNode until we click out of the select

scrnli_10_9_2023_10-53-40.AM.webm

I get what you mean, in reality it was 100% made on purpose to fit the design system. The select is not intended to be used with exotic heights, in such cases it probably means the UI/UX of the feature could be reworked in another way to be able to use native components based on quick talk with @jbpenrath

WDYT @AntoLC ?

[AntoLC]

I get what you mean, in reality it was 100% made on purpose to fit the design system. The select is not intended to be used with exotic heights, in such cases it probably means the UI/UX of the feature could be reworked in another way to be able to use native components based on quick talk with @jbpenrath

WDYT @AntoLC ?

I think that the client would have about 15px to be able to render his option without modifying the height, so it will not cover lot of use cases.

[AntoLC]

• In searchable mode, when we click on the option, the filter stay active so we don't see the ReactNode until we click out of the select

scrnli_10_9_2023_10-53-40.AM.webm

What about this part?

[jbpenrath]

Looks good, meets Marsha's needs!

2 remarks:

• height relative to the content
  
• In searchable mode, when we click on the option, the filter stay active so we don't see the ReactNode until we click out of the select

scrnli_10_9_2023_10-53-40.AM.webm

@AntoLC could you provide a video of the current implementation of this select ?

[AntoLC]

could you provide a video of the current implementation of this select ?

In our Marsha use cases we have that:

All are just observations, we can change the height on our side if it's complicated for you.

[NathanVss]

• In searchable mode, when we click on the option, the filter stay active so we don't see the ReactNode until we click out of the select

scrnli_10_9_2023_10-53-40.AM.webm

What about this part?

What other possibilities do we have? In search mode when giving focus to input we need to deal with text, so that's why we use label we can't fit the ReactNode inside a text input.

[AntoLC]

• In searchable mode, when we click on the option, the filter stay active so we don't see the ReactNode until we click out of the select

scrnli_10_9_2023_10-53-40.AM.webm

What about this part?

What other possibilities do we have? In search mode when giving focus to input we need to deal with text, so that's why we use label we can't fit the ReactNode inside a text input.

Other possibility, when you click on the option you display the option, as it is now when you click on the option you still display the filter until the user click out of the select as shown in the video.

[AntoLC]

All good, fits Marsha cases.

[NathanVss]

• In searchable mode, when we click on the option, the filter stay active so we don't see the ReactNode until we click out of the select

scrnli_10_9_2023_10-53-40.AM.webm

What about this part?

What other possibilities do we have? In search mode when giving focus to input we need to deal with text, so that's why we use label we can't fit the ReactNode inside a text input.

Other possibility, when you click on the option you display the option, as it is now when you click on the option you still display the filter until the user click out of the select as shown in the video.

I understand, it would imply a structural change were when you select an option you loose focus on the search input, which is not what we see on other libraries at most 🤔