react-timezone-select icon indicating copy to clipboard operation
react-timezone-select copied to clipboard

Cursor didn't show pointer when passing the dropdown

Open Toledodev opened this issue 3 years ago • 1 comments

Describe the bug

On preview page when I open the timezones dropdown the cursor doesn't show "pointer"

Reproduction

  1. 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.

Toledodev avatar Jul 29 '22 13:07 Toledodev

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;
}

ndom91 avatar Jul 31 '22 16:07 ndom91

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 ^^.

ndom91 avatar Dec 10 '23 15:12 ndom91