primereact
primereact copied to clipboard
Dropdown: Safari rendering issue with small fixed width
Describe the bug
In Safari, when a small fixed width is applied to a dropdown, the scrollbar is not rendered correctly. The width of the dropdown is not big enough to render the content , causing the items with long labels inside the dropdown to be 'squished'. This only happens when there are enough items in the list and the scroll becomes necessary.
I suspect it has something to do with the way Safari handles the overflow auto option and the way it adds the scrollbar, as it's different than in other browsers.
Screenshot from chrome:
Screenshot from safari:
Reproducer
https://stackblitz.com/edit/fhik6h-wwhyzz?file=src%2FApp.jsx
System Information
System:
OS: macOS 14.5
CPU: (8) arm64 Apple M1 Pro
Memory: 88.42 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.20.3 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
primereact: latest => 10.8.3
react: 18.3.1 => 18.3.1
Browsers:
Chrome: 129.0.6668.70
Safari: 17.5
Steps to reproduce the behavior
- Set a small fixed width on a dropdown.
- Add enough items so a scroll will appear.
- Open the dropdown.
Expected behavior
Dropdown width should be bigger in safari when scrollbar is present.