[react-interactions] Allow event.preventDefault on LegacyPress responder (#17113)
[react-interactions] Allow event.preventDefault on LegacyPress responder
Dominic Gannaway committed
Oct 17, 2019 at 10:21 UTC
8facc0537390bbdd52359f693ecf445e6f787174
2 files changed
+25
-9
packages/react-interactions/events/src/dom/PressLegacy.js
+8
-9
@@ -157,9 +157,10 @@ function createPressEvent(
157
let ctrlKey = false;
158
let metaKey = false;
159
let shiftKey = false;
160
+ let nativeEvent;
161
162
if (event) {
162
- const nativeEvent = (event.nativeEvent: any);
163
+ nativeEvent = (event.nativeEvent: any);
164
({altKey, ctrlKey, metaKey, shiftKey} = nativeEvent);
165
// Only check for one property, checking for all of them is costly. We can assume
166
// if clientX exists, so do the rest.
@@ -169,7 +170,7 @@ function createPressEvent(
170
({clientX, clientY, pageX, pageY, screenX, screenY} = eventObject);
171
}
172
}
172
- return {
173
+ const pressEvent = {
174
altKey,
175
buttons: state.buttons,
176
clientX,
@@ -189,13 +190,10 @@ function createPressEvent(
190
x: clientX,
191
y: clientY,
192
preventDefault() {
192
- // NO-OP, we should remove this in the future
193
- if (__DEV__) {
194
- warning(
195
- false,
196
- 'preventDefault is not available on event objects created from event responder modules (React Flare). ' +
197
- 'Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.preventDefault() }`',
198
- );
193
+ state.shouldPreventClick = true;
194
+ if (nativeEvent) {
195
+ pressEvent.defaultPrevented = true;
196
+ nativeEvent.preventDefault();
197
}
198
},
199
stopPropagation() {
@@ -209,6 +207,7 @@ function createPressEvent(
207
}
208
},
209
};
210
+ return pressEvent;
211
}
212
213
function dispatchEvent(
packages/react-interactions/events/src/dom/__tests__/PressLegacy-test.internal.js
+17
@@ -1131,4 +1131,21 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
1131
target.pointerup();
1132
target.pointerdown();
1133
});
1134
+
1135
+ it('event.preventDefault works as expected', () => {
1136
+ const onPress = jest.fn(e => e.preventDefault());
1137
+ const preventDefault = jest.fn();
1138
+ const buttonRef = React.createRef();
1139
+
1140
+ const Component = () => {
1141
+ const listener = usePress({onPress});
1142
+ return <button ref={buttonRef} listeners={listener} />;
1143
+ };
1144
+ ReactDOM.render(<Component />, container);
1145
+
1146
+ const target = createEventTarget(buttonRef.current);
1147
+ target.pointerdown();
1148
+ target.pointerup({preventDefault});
1149
+ expect(preventDefault).toBeCalled();
1150
+ });
1151
});