Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Flare] Ensure mouse events can use target to validate press (#16172)

Browse Source
This commit is contained in:
Dominic Gannaway
2019-07-22 12:31:19 +01:00
committed by GitHub
parent 2c4d61e102
commit 783b8f4ae1
3 changed files with 61 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-dom/src/events/DOMEventResponderSystem.js
Vendored
+2 -1
View File
@@ -234,10 +234,11 @@ const eventResponderContext: ReactDOMResponderContext = {
validateResponderContext();
const childFiber = getClosestInstanceFromNode(childTarget);
const parentFiber = getClosestInstanceFromNode(parentTarget);
const parentAlternateFiber = parentFiber.alternate;
let node = childFiber;
while (node !== null) {
if (node === parentFiber) {
if (node === parentFiber || node === parentAlternateFiber) {
return true;
}
node = node.return;
packages/react-events/src/dom/Press.js
Vendored
+33 -26
View File
@@ -837,20 +837,22 @@ const PressResponder: ReactDOMEventResponder = {
}
const pressTarget = state.pressTarget;
if (
pressTarget !== null &&
!targetIsDocument(pressTarget) &&
(pointerType !== 'mouse' ||
!context.isTargetWithinNode(target, pressTarget))
) {
// Calculate the responder region we use for deactivation, as the
// element dimensions may have changed since activation.
updateIsPressWithinResponderRegion(
touchEvent || nativeEvent,
context,
props,
state,
);
if (pressTarget !== null && !targetIsDocument(pressTarget)) {
if (
pointerType === 'mouse' &&
context.isTargetWithinNode(target, pressTarget)
) {
state.isPressWithinResponderRegion = true;
} else {
// Calculate the responder region we use for deactivation, as the
// element dimensions may have changed since activation.
updateIsPressWithinResponderRegion(
touchEvent || nativeEvent,
context,
props,
state,
);
}
}
if (state.isPressWithinResponderRegion) {
@@ -958,19 +960,24 @@ const PressResponder: ReactDOMEventResponder = {
if (
!isKeyboardEvent &&
pressTarget !== null &&
!targetIsDocument(pressTarget) &&
(pointerType !== 'mouse' ||
!context.isTargetWithinNode(target, pressTarget))
!targetIsDocument(pressTarget)
) {
// If the event target isn't within the press target, check if we're still
// within the responder region. The region may have changed if the
// element's layout was modified after activation.
updateIsPressWithinResponderRegion(
touchEvent || nativeEvent,
context,
props,
state,
);
if (
pointerType === 'mouse' &&
context.isTargetWithinNode(target, pressTarget)
) {
state.isPressWithinResponderRegion = true;
} else {
// If the event target isn't within the press target, check if we're still
// within the responder region. The region may have changed if the
// element's layout was modified after activation.
updateIsPressWithinResponderRegion(
touchEvent || nativeEvent,
context,
props,
state,
);
}
}
if (state.isPressWithinResponderRegion && button !== 1) {
if (
packages/react-events/src/dom/__tests__/Press-test.internal.js
+26
View File
@@ -812,6 +812,32 @@ describe('Event responder: Press', () => {
);
});
it('is called if target rect is not right but the target is (for mouse events)', () => {
const buttonRef = React.createRef();
const divRef = React.createRef();
const element = (
<Press onPress={onPress}>
<div ref={divRef}>
<button ref={buttonRef} />
</div>
</Press>
);
ReactDOM.render(element, container);
divRef.current.getBoundingClientRect = () => ({
left: 0,
right: 0,
bottom: 0,
top: 0,
});
buttonRef.current.dispatchEvent(
createEvent('pointerdown', {pointerType: 'mouse'}),
);
buttonRef.current.dispatchEvent(
createEvent('pointerup', {pointerType: 'mouse'}),
);
expect(onPress).toBeCalled();
});
// No PointerEvent fallbacks
// TODO: jsdom missing APIs
// it('is called after "touchend" event', () => {