Fix event handling with react-beautiful-dnd

[itsdouges]

This pull request removes logic to bail out from an event if someone else listening to the event (usually in a capture phase) has called preventDefault(). This fixes interop between react-select and react-beautiful-dnd.

To ensure things don't regress, and to ensure to not contradict what was solved in #5134 I've added four e2e tests covering the various flows in both:

• an emulated react-beautiful-dnd environment, and
• direct react-calendar interop

All tests pass, the same behaviour remains, hopefully we're good to go.

TODO

• fix tests
• assess the solution and seek alternatives if needed

Closes #5833

[changeset-bot]

🦋 Changeset detected

Latest commit: 16b4be7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
react-select	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[itsdouges]

cc @rkulinski @flexdinesh

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 16b4be7:

Sandbox	Source
react-codesandboxer-example	Configuration

[theKashey]

is there a test for this particular use case - dropdown indicator preventing default event (

react-select/packages/react-select/src/Select.tsx

Line 1345 in 06e3488

event.preventDefault();

)

Also, not quite clear why stopPropagation is not a case, onMenuMouseDown uses it (uses both) for example.

---

This code was added here for a reason, and I can see other pieces relying on this one. Basically - all .preventDefault in this file.

What if we try to change the game rules and just rely on a different information source?

const createEventTracker = () => {
  const tracker = new WeakSet();
  return {
       mark: (event) => {
        tracker.add(event.target);
        Promise.resolve().then(() => tracker.delete(event.target);
      },
      isMarked: (event) => tracker.has(event.target);
 }
} 

/// ....
const mouseDownTracker = createEventTracker();

onDropdownIndicatorMouseDown = (e) => {
  // ...
  mouseDownTracker.mark(e);
}

onControlMouseDown = (event) => {
    // Event captured by dropdown indicator
    if (mouseDownTracker.isMarked(event)) {
      return;
    }
}

Might be a little too much code to support a single line, but this code will keep the old behavior and unlock our usecase.

[itsdouges]

This prevent default was added in #5134 — I can't imagine anything in Select is leaning on it?

We can definitely change the rules like you said if the behaviour is needed. I'm just not sure it is.

[itsdouges]

The failing tests might point to it being needed I suppose ;).

[theKashey]

Right, and you added tests for #5050 case, and they are passing. May be something else in between, including changes in DatePicker resolved the problem in the meanwhile

[itsdouges]

Yeah you're right, which is what the tests are showing now. I'll dig in soon.