diff --git a/packages/react-dom/src/events/DOMEventResponderSystem.js b/packages/react-dom/src/events/DOMEventResponderSystem.js
index 85483a24f1..7003669302 100644
--- a/packages/react-dom/src/events/DOMEventResponderSystem.js
+++ b/packages/react-dom/src/events/DOMEventResponderSystem.js
@@ -114,39 +114,54 @@ const eventResponderContext: ReactResponderContext = {
'context.dispatchEvent: "target", "timeStamp", and "type" fields on event object are required.',
);
}
- if (__DEV__) {
- const showWarning = name => {
+ const showWarning = name => {
+ if (__DEV__) {
warning(
false,
- '%s is not available on event objects created from event responder modules (React Flare).',
+ '%s is not available on event objects created from event responder modules (React Flare). ' +
+ 'Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.%s }`',
+ name,
name,
);
- };
- possibleEventObject.preventDefault = () => {
+ }
+ };
+ possibleEventObject.preventDefault = () => {
+ if (__DEV__) {
showWarning('preventDefault()');
- };
- possibleEventObject.stopPropagation = () => {
+ }
+ };
+ possibleEventObject.stopPropagation = () => {
+ if (__DEV__) {
showWarning('stopPropagation()');
- };
- possibleEventObject.isDefaultPrevented = () => {
+ }
+ };
+ possibleEventObject.isDefaultPrevented = () => {
+ if (__DEV__) {
showWarning('isDefaultPrevented()');
- };
- possibleEventObject.isPropagationStopped = () => {
+ }
+ };
+ possibleEventObject.isPropagationStopped = () => {
+ if (__DEV__) {
showWarning('isPropagationStopped()');
- };
- // $FlowFixMe: we don't need value, Flow thinks we do
- Object.defineProperty(possibleEventObject, 'nativeEvent', {
- get() {
+ }
+ };
+ // $FlowFixMe: we don't need value, Flow thinks we do
+ Object.defineProperty(possibleEventObject, 'nativeEvent', {
+ get() {
+ if (__DEV__) {
showWarning('nativeEvent');
- },
- });
- // $FlowFixMe: we don't need value, Flow thinks we do
- Object.defineProperty(possibleEventObject, 'defaultPrevented', {
- get() {
+ }
+ },
+ });
+ // $FlowFixMe: we don't need value, Flow thinks we do
+ Object.defineProperty(possibleEventObject, 'defaultPrevented', {
+ get() {
+ if (__DEV__) {
showWarning('defaultPrevented');
- },
- });
- }
+ }
+ },
+ });
+
const eventObject = ((possibleEventObject: any): $Shape<
PartialEventObject,
>);
diff --git a/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
index 922dff8246..74338df44d 100644
--- a/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
@@ -861,8 +861,9 @@ describe('DOMEventResponderSystem', () => {
ReactDOM.render(, container);
dispatchClickEvent(document.body);
}).toWarnDev(
- 'Warning: preventDefault() is not available on event objects created ' +
- 'from event responder modules (React Flare).',
+ 'Warning: preventDefault() is not available on event objects created from event responder modules ' +
+ '(React Flare).' +
+ ' Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.preventDefault() }`',
{withoutStack: true},
);
expect(() => {
@@ -872,8 +873,9 @@ describe('DOMEventResponderSystem', () => {
ReactDOM.render(, container);
dispatchClickEvent(document.body);
}).toWarnDev(
- 'Warning: stopPropagation() is not available on event objects created ' +
- 'from event responder modules (React Flare).',
+ 'Warning: stopPropagation() is not available on event objects created from event responder modules ' +
+ '(React Flare).' +
+ ' Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.stopPropagation() }`',
{withoutStack: true},
);
expect(() => {
@@ -883,8 +885,9 @@ describe('DOMEventResponderSystem', () => {
ReactDOM.render(, container);
dispatchClickEvent(document.body);
}).toWarnDev(
- 'Warning: isDefaultPrevented() is not available on event objects created ' +
- 'from event responder modules (React Flare).',
+ 'Warning: isDefaultPrevented() is not available on event objects created from event responder modules ' +
+ '(React Flare).' +
+ ' Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.isDefaultPrevented() }`',
{withoutStack: true},
);
expect(() => {
@@ -894,8 +897,9 @@ describe('DOMEventResponderSystem', () => {
ReactDOM.render(, container);
dispatchClickEvent(document.body);
}).toWarnDev(
- 'Warning: isPropagationStopped() is not available on event objects created ' +
- 'from event responder modules (React Flare).',
+ 'Warning: isPropagationStopped() is not available on event objects created from event responder modules ' +
+ '(React Flare).' +
+ ' Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.isPropagationStopped() }`',
{withoutStack: true},
);
expect(() => {
@@ -905,8 +909,9 @@ describe('DOMEventResponderSystem', () => {
ReactDOM.render(, container);
dispatchClickEvent(document.body);
}).toWarnDev(
- 'Warning: nativeEvent is not available on event objects created ' +
- 'from event responder modules (React Flare).',
+ 'Warning: nativeEvent is not available on event objects created from event responder modules ' +
+ '(React Flare).' +
+ ' Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.nativeEvent }`',
{withoutStack: true},
);
expect(() => {
@@ -916,8 +921,9 @@ describe('DOMEventResponderSystem', () => {
ReactDOM.render(, container);
dispatchClickEvent(document.body);
}).toWarnDev(
- 'Warning: defaultPrevented is not available on event objects created ' +
- 'from event responder modules (React Flare).',
+ 'Warning: defaultPrevented is not available on event objects created from event responder modules ' +
+ '(React Flare).' +
+ ' Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.defaultPrevented }`',
{withoutStack: true},
);