Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

On hover? #917

Closed
Mauro74 opened this issue Apr 27, 2016 · 8 comments
Closed

On hover? #917

Mauro74 opened this issue Apr 27, 2016 · 8 comments

Comments

@Mauro74
Copy link

Mauro74 commented Apr 27, 2016

Is there a way to trigger the drop down on hover rather than click?

Thanks

@gojohnnygo
Copy link
Contributor

There's not a way out of the box.

Though, it seems like you can and by adding an event listener here.

Something like onMouseOver={this.handleMouseDown} should do the trick bc you're trying to replicate the same functionality as onMouseDown. Note, I have not tested this myself.

woochi added a commit to woochi/react-select that referenced this issue Aug 3, 2016
@cbrwizard
Copy link

cbrwizard commented Mar 8, 2018

Hey @gojohnnygo could you please provide an example?
Rendering it with

        onMouseOver={() => {
          console.debug('mouse over')
        }}

prop doesn't call console on mouse over.

If there is no way, would you accept a PR from me which adds a prop shouldToggleOnHover?

@gojohnnygo
Copy link
Contributor

gojohnnygo commented Mar 9, 2018

@cbrwizard maybe try the following...

  1. Set the openOnFocus prop to true.
  2. Wrap react-select a div that has an onMouseOver handler
  3. In the handler, call focus() on the react-select instance

Also, I don't have merge permissions. :)

@Benornm
Copy link

Benornm commented Jun 21, 2018

What about close the dropdown on blur ???

@k8martian
Copy link

I need on hover specific option and trigger an event like populate some form fields before select the option. I tried the other way round, select and populate, the selected value disappear. Any suggestion?

@k8martian
Copy link

I found this and might be helpful to someone.

@raidel-dev
Copy link

add this
'&:hover':{
backgroundColor:'#000'
}

@bladey
Copy link
Contributor

bladey commented May 28, 2020

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!

@bladey bladey closed this as completed May 28, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants