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}, );