React-select: cursor:pointer should be used for dropdown and hover on options

[nitinsurana]

Checkout the react-select demo here : https://react-select.com/home

Notice, that hovering on the dropdown arrow, does not change the cursor.
Also, notice that hovering on the dropdown options, does not change the cursor.

Expected:
cursor:pointer should be used for the above two scenarios.

Please see the demo from another popular plugin - https://select2.org/getting-started/basic-usage.
Notice, that the dropdown arrow as well as options use mouse icon pointer.

[JavaMajk]

+1

[binhxn]

@nitinsurana You can customize it through their styles prop like so:

// selectorStyles object
const customStyles = {
  option: (styles, state) => ({
    ...styles,
    cursor: 'pointer',
  }),
  control: (styles) => ({
    ...styles,
    cursor: 'pointer',
  }),

// Select component
<Select
  styles={customStyles}
  options={...}
/>

[nitinsurana]

@binhxn Thanks. I ended up using a similar solution then.
But it'll be great to have it in the plugin itself.

[brandonparis]

@binhxn Thanks. I ended up using a similar solution then.
But it'll be great to have it in the plugin itself.

I would like to fix this if nobody else has and if it's still something that should be added!

[Niscolinx]

@nitinsurana You can customize it through their styles prop like so:

// selectorStyles object
const customStyles = {
  option: (styles, state) => ({
    ...styles,
    cursor: 'pointer',
  }),
  control: (styles) => ({
    ...styles,
    cursor: 'pointer',
  }),

// Select component
<Select
  styles={customStyles}
  options={...}
/>

Thanks, it worked

[bladey]

Hi all,

@brandonparis we'd appreciate a PR for this if you're able! For now I'll close this issue as we're cleaning up and closing old issues to keep things under control.

However, if you feel this issue should be reopened - please leave a comment.

[ebaynaud]

This one should be addressed, keep it open please!

[brandonparis]

Hi all,

@brandonparis we'd appreciate a PR for this if you're able! For now I'll close this issue as we're cleaning up and closing old issues to keep things under control.

However, if you feel this issue should be reopened - please leave a comment.

I’ll submit a PR when I have a minute.

[ebaynaud]

@brandonparis take a pause, do it now :)

[ebaynaud]

Sure, all clickable elements require a pointer

On Wed 3 Jun 2020 at 13:31, Brandon Paris [e-mail] wrote:

Does it also make sense to use cursor:pointer for the x that clears a
clearable input?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/JedWatson/react-select/issues/3831#issuecomment-638137659,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAOVCFMXWWI7RKCEH7B5JVDRUYYBZANCNFSM4JE7BQEQ
.

>

Erwan

[bladey]

Thanks @ebaynaud and @brandonparis!