Hover/Focus styling on Option

[theocerutti]

Hello,

I would like to style my select when i'm focusing option with my keyboard -> the prefix --is-focused works fine here.
The problem is the --is-focused is also applied to the hovered option.
I think it would be better to remove this behavior.
So that we can style both hovered/focused option differently.
With that fix we should use --is-focused only for keyboard navigation, and &:hover for hovered option (maybe create a new hover prefix class ?)

Thanks!

[theocerutti]

I found a workaround, but it stills display a focusedOption on menuOpen (while it should displays focusedOption only if I hit keyboard arrow)

I disabled the focus onHover on options with:

  const innerProps = {
    ...props.innerProps,
    // HERE IS THE WORKAROUND
    // remove onMouseMove & onMouseOver so that options are not focused on hover
    onMouseMove: undefined,
    onMouseOver: undefined,
  };

  return (
    <components.Option
      {...props}
      innerProps={innerProps}
    />

[ebonow]

Greetings @theocerutti ,

This seems more in line with the spirit of discussions, so I hope you don't mind me moving this there.

Removing onMouseMove/Over may also add some performance so that would likely be the preferred route.