Select has scroll x enabled for long values after upgrading

[ibenjelloun]

What package has an issue

@mantine/core

Describe the bug

After upgrading from 5.10.5 to 6.0.10, the Select component bahavior changed for long values, an horizontal scroll bar is displayed instead of wrapping item content :

Observed :

Expected :

What version of @mantine/hooks page do you have in package.json?

6.0.10

If possible, please include a link to a codesandbox with the reproduced problem

https://stackblitz.com/edit/react-ts-1k2vpc?file=App.tsx

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Possible fix

No response

[mustaphaboudouch]

I solved the issue, here is the solution : https://stackblitz.com/edit/react-ts-9cnamk?file=App.tsx

[ibenjelloun]

I solved the issue, here is the solution : https://stackblitz.com/edit/react-ts-9cnamk?file=App.tsx

Hello @mustaphaboudouch, thank you for your suggestion, the behavior is better than the default but still not the same as the version 5, you can see the expected result in the issue description.

[ibenjelloun]

Can go back to previous behavior with this style change :

const useStyles = createStyles(() => ({
  item: {
    whiteSpace: 'break-spaces',
  },
}));

https://stackblitz.com/edit/react-ts-z8tsan?file=App.tsx

[mustaphaboudouch]

Sorry, i didn't see the expected behavior, here is the solution : https://stackblitz.com/edit/react-ts-9cnamk?file=App.tsx

[ibenjelloun]

Is the horizontal scroll supposed to be the default behavior ?

[mustaphaboudouch]

Yes, because the select popover is wrapped in a scrollarea component 👇

[ibenjelloun]

Yes, because the select popover is wrapped in a scrollarea component 👇

I understand that the horizontal scrollbar comes from the usage of ScrollArea, but do we really want this to be the default behavior ?
From my subjective point of view, this change is a regression and the default behavior should wrap text instead of adding an horizontal scrollbar.

[mustaphaboudouch]

I agree with you, but this is a rare case, because if you want the user to select between options with large text, I don't think select component is the best option , you can use a radio button or checkable custom items...