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

Option selection on mouse down not mouse up #432

Closed
wbecker opened this issue Sep 4, 2015 · 9 comments
Closed

Option selection on mouse down not mouse up #432

wbecker opened this issue Sep 4, 2015 · 9 comments

Comments

@wbecker
Copy link

wbecker commented Sep 4, 2015

In my UI, when a user wants to create a new option in the list, I want to provide a modal dialog to the user so that can set additional data about the the new option they are creating.

My problem is that the onChange event is triggered on the MouseDown event. At this point I create the dialog, however when the MouseUp event happens afterwards, because the user's mouse is not inside the dialog, the dialog gets dismissed.

I think the best solution would be to make selection on mouse up (or allow the programmer to decide on which event it should occur on instead of hard coding it)

@davidnussio
Copy link

I have the same problem.

I'm using onChange callback to trigger change page on react-router. With MouseDown the elements on new page receive a click event. It happen because the new page appear before MouseUp.

The react-select handle MouseDown and TouchEnd but for my opinion is better to use combination of MouseDown/TouchStart or MouseUp/TouchEnd.

@dalizwei
Copy link

dalizwei commented Jul 8, 2016

I am going in the same issue any update ?

@Sen
Copy link

Sen commented Apr 21, 2017

got same issue, any solution?

@dalizwei
Copy link

We can pass an optionComponent prop to Async. I created a new custom optionComponent that select on the MouseUp event and it stopPropagation preventDefault on MouseDown event.
And it was good. Hope that helps.

@Sen
Copy link

Sen commented Apr 21, 2017

@dalizwei thank you very much, very good solution.

@camlough
Copy link

+1 Still seeing this problem on mobile (ipad). unfortunately @dalizwei 's solution does not work so well for mobile devices with touch events

@Sen
Copy link

Sen commented Jul 28, 2017

@camlough i think it's the same thing, on mobile devise, you should check tap event rather than click event.

@camlough
Copy link

camlough commented Jul 28, 2017

@Sen yeah i tried the same implementation but using onTouchStart and onTouchEnd but the problem i had was it completely prevented the ability to scroll the options because of event.preventDefault() event.stopPropagation();

So i tried this:

  handleTouchStart (event) {
    if(!this.dragging) {
      event.preventDefault();
      event.stopPropagation();
    }
    this.dragging = false;
  }
  handleTouchEnd (event) {
    if(this.dragging){
      return;
    }
    this.props.onSelect(this.props.option, event);
  }
  handleTouchMove () {
    // Set a flag that the view is being dragged
    this.dragging = true;
  }

And that partially fixed the scrolling problem, but it was still very choppy, so not a viable solution

@jossmac
Copy link
Collaborator

jossmac commented Mar 17, 2020

Version 1 of react-select is no longer supported.

In the best interest of the community we've decided to spend the time we have available on the latest version.

We apologise for any inconvenience.

Please see:

  1. v1 to v2 upgrade guide
  2. v1 documentation and examples

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

6 participants