Option selection on mouse down not mouse up

[wbecker]

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]

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]

I am going in the same issue any update ?

[Sen]

got same issue, any solution?

[dalizwei]

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]

@dalizwei thank you very much, very good solution.

[camlough]

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

[Sen]

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

[camlough]

@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]

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