Fix event handling with react-beautiful-dnd #5842
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| 'react-select': patch | ||
| --- | ||
|
|
||
| Select no longer stops the control mouse down event from firing if someone listening to the event calls `.preventDefault()`. This resolves issues seen with react-select interop-ing with other libraries, such as react-beautiful-dnd. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import selector from '../fixtures/selectors.json'; | ||
| import cypressJson from '../../cypress.json'; | ||
|
|
||
| describe('event propagation', () => { | ||
| before(() => { | ||
| cy.visit(cypressJson.baseUrl); | ||
| cy.title().should('equal', 'React-Select'); | ||
| cy.get('h1').should('contain', 'Test Page for Cypress'); | ||
| }); | ||
|
|
||
| beforeEach(() => { | ||
| cy.reload(); | ||
| }); | ||
|
|
||
| it('should open select via value container after a parent prevent defaulted the event', () => { | ||
| cy.get(selector.preventDefaultTest.valueContainer) | ||
| .click() | ||
| .get(selector.preventDefaultTest.menu) | ||
| .should('exist'); | ||
| }); | ||
|
|
||
| it('should open select via indicator after a parent prevent defaulted the event', () => { | ||
| cy.get(selector.preventDefaultTest.indicator) | ||
| .click() | ||
| .get(selector.preventDefaultTest.menu) | ||
| .should('exist'); | ||
| }); | ||
|
|
||
| it('should close react calendar when interacting with the select indicator', () => { | ||
| cy.get(selector.bubblingTest.datePickerInput) | ||
| .click() | ||
| .get(selector.bubblingTest.indicator) | ||
| .click() | ||
| .get(selector.bubblingTest.menu) | ||
| .should('exist') | ||
| .get(selector.bubblingTest.datePickerMenu) | ||
| .should('not.exist'); | ||
| }); | ||
|
|
||
| it('should close react calendar when interacting with the select value container', () => { | ||
| cy.get(selector.bubblingTest.datePickerInput) | ||
| .click() | ||
| .get(selector.bubblingTest.valueContainer) | ||
| .click() | ||
| .get(selector.bubblingTest.menu) | ||
| .should('exist') | ||
| .get(selector.bubblingTest.datePickerMenu) | ||
| .should('not.exist'); | ||
| }); | ||
| }); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -1293,10 +1293,6 @@ export default class Select< | |
| onControlMouseDown = ( | ||
| event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement> | ||
| ) => { | ||
|
There was a problem hiding this comment. 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 Also, not quite clear why This code was added here for a reason, and I can see other pieces relying on this one. Basically - all 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. There was a problem hiding this comment. 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. There was a problem hiding this comment. The failing tests might point to it being needed I suppose ;). There was a problem hiding this comment. 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 There was a problem hiding this comment. Yeah you're right, which is what the tests are showing now. I'll dig in soon. |
||
| const { openMenuOnClick } = this.props; | ||
| if (!this.state.isFocused) { | ||
| if (openMenuOnClick) { | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.