rightSection for Select is not clickable

[anton-bot]

I'm following the example here: https://mantine.dev/core/select/

<Select rightSection={<ChevronDownIcon />} />

The problem is, the chevron icon for the dropdown becomes non-clickable. How do you manually open or close the dropdown when the ChevronDownIcon is clicked?

[rtivital]

You will need to remove pointer events from right section, to do so use Styles API:

<Select styles={{ rightSection: { pointerEvents: 'none' } }} />

This is applicable to any Mantine input with right section

[anton-bot]

That works, thanks! Although in TypeScript I had to type this styles object as any.

[MrBirb]

I feel like this should be the default

[rtivital]

No, right section may contain interactive elements and this will be confusing.