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

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.

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