Cursor didn't show pointer when passing the dropdown
Describe the bug
On preview page when I open the timezones dropdown the cursor doesn't show "pointer"
Reproduction
- Create a new event typr 2. Go to preview 3. Try to change the selected timezone
System Info
System:
OS: Linux 5.15 Ubuntu 20.04.4 LTS (Focal Fossa)
CPU: (6) x64 AMD Ryzen 5 3500X 6-Core Processor
Memory: 157.17 MB / 15.57 GB
Container: Yes
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
Yarn: 1.22.18 - ~/.nvm/versions/node/v14.17.0/bin/yarn
npm: 8.9.0 - ~/.nvm/versions/node/v14.17.0/bin/npm
Browsers:
Chrome: 100.0.4896.127
Firefox: 103.0
Used Package Manager
yarn
Validations
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
- [X] The provided reproduction is a minimal reproducible of the bug.
Hey @Toledodev so this was actually raised in an issue before (https://github.com/ndom91/react-timezone-select/issues/35). At the time I ended up implementing this myself, but as it was the only CSS change from me in the library it didn't end up justifying the tooling and extra work for that one CSS change and I removed it again a few patch versions later.
However, we're using the react-select component as the underlying dropdown / select and they explicitly decided against it as well, but with the caveat that it was a breaking change and users could easily implement it themselves. (See: https://github.com/JedWatson/react-select/pull/4069)
The CSS in this case would look something like this:
.select-wrapper > div > div:hover {
cursor: pointer;
}
We now also have a hook (useTimezoneSelect) where you can import the behaviour, but use your own select component. So you don't need to deal with the peculiarities of react-select like this :+1:
Closing this issue since theres that option, as well as the workaround I'd mentioned originally above ^^.