diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap index e43d4ee3b..c5d22bea8 100644 --- a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap @@ -18,8 +18,9 @@ exports[`AppRegistry runApplication styles roots in different documents 1`] = ` ".r-pointerEvents-105ug2t {pointer-events: auto !important;}", ".r-pointerEvents-12vffkv * {pointer-events: auto;}", ".r-pointerEvents-12vffkv {pointer-events: none !important;}", + ".r-pointerEvents-633pao * {pointer-events: none;}", ".r-pointerEvents-633pao {pointer-events: none !important;}", - ".r-pointerEvents-ah5dr5>* {pointer-events: none;}", + ".r-pointerEvents-ah5dr5 * {pointer-events: none;}", ".r-pointerEvents-ah5dr5 {pointer-events: auto !important;}", ".r-position-u8s1d {position: absolute;}", ".r-right-zchlnj {right: 0px;}", @@ -45,8 +46,9 @@ exports[`AppRegistry runApplication styles roots in different documents 2`] = ` ".r-pointerEvents-105ug2t {pointer-events: auto !important;}", ".r-pointerEvents-12vffkv * {pointer-events: auto;}", ".r-pointerEvents-12vffkv {pointer-events: none !important;}", + ".r-pointerEvents-633pao * {pointer-events: none;}", ".r-pointerEvents-633pao {pointer-events: none !important;}", - ".r-pointerEvents-ah5dr5>* {pointer-events: none;}", + ".r-pointerEvents-ah5dr5 * {pointer-events: none;}", ".r-pointerEvents-ah5dr5 {pointer-events: auto !important;}", ".r-position-u8s1d {position: absolute;}", ".r-right-zchlnj {right: 0px;}", diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js index 42a5ab987..821b73b1d 100644 --- a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js +++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js @@ -63,8 +63,9 @@ describe('AppRegistry', () => { .r-pointerEvents-105ug2t{pointer-events:auto!important;} .r-pointerEvents-12vffkv * {pointer-events:auto;} .r-pointerEvents-12vffkv{pointer-events:none!important;} + .r-pointerEvents-633pao * {pointer-events:none;} .r-pointerEvents-633pao{pointer-events:none!important;} - .r-pointerEvents-ah5dr5>*{pointer-events:none;} + .r-pointerEvents-ah5dr5 * {pointer-events:none;} .r-pointerEvents-ah5dr5{pointer-events:auto!important;} .r-position-u8s1d{position:absolute;} .r-right-zchlnj{right:0px;} @@ -121,8 +122,9 @@ describe('AppRegistry', () => { .r-pointerEvents-105ug2t{pointer-events:auto!important;} .r-pointerEvents-12vffkv * {pointer-events:auto;} .r-pointerEvents-12vffkv{pointer-events:none!important;} + .r-pointerEvents-633pao * {pointer-events:none;} .r-pointerEvents-633pao{pointer-events:none!important;} - .r-pointerEvents-ah5dr5>*{pointer-events:none;} + .r-pointerEvents-ah5dr5 * {pointer-events:none;} .r-pointerEvents-ah5dr5{pointer-events:auto!important;} .r-position-u8s1d{position:absolute;} .r-right-zchlnj{right:0px;} @@ -172,8 +174,9 @@ describe('AppRegistry', () => { .r-pointerEvents-105ug2t{pointer-events:auto!important;} .r-pointerEvents-12vffkv * {pointer-events:auto;} .r-pointerEvents-12vffkv{pointer-events:none!important;} + .r-pointerEvents-633pao * {pointer-events:none;} .r-pointerEvents-633pao{pointer-events:none!important;} - .r-pointerEvents-ah5dr5>*{pointer-events:none;} + .r-pointerEvents-ah5dr5 * {pointer-events:none;} .r-pointerEvents-ah5dr5{pointer-events:auto!important;} .r-position-u8s1d{position:absolute;} .r-right-zchlnj{right:0px;} diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-test.js index c0cb7036e..6709f69e1 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-test.js +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-test.js @@ -142,7 +142,7 @@ describe('StyleSheet/compile', () => { ], [ [ - ".r-pointerEvents-ah5dr5>*{pointer-events:none;}", + ".r-pointerEvents-ah5dr5 * {pointer-events:none;}", ".r-pointerEvents-ah5dr5{pointer-events:auto!important;}", ], 3, @@ -177,6 +177,30 @@ describe('StyleSheet/compile', () => { `); }); + test('when parent is pointer-events=none, pointer-events=none applied to children', () => { + const result = atomic({ + pointerEvents: 'none' + }); + + expect(result).toMatchInlineSnapshot(` + [ + { + "$$css": true, + "pointerEvents": "r-pointerEvents-633pao", + }, + [ + [ + [ + ".r-pointerEvents-633pao * {pointer-events:none;}", + ".r-pointerEvents-633pao{pointer-events:none!important;}", + ], + 3, + ], + ], + ] + `); + }); + test('when parent is pointer-events=box-none, pointer-events=auto applied to children', () => { const result = atomic({ pointerEvents: 'box-none' diff --git a/packages/react-native-web/src/exports/StyleSheet/compiler/index.js b/packages/react-native-web/src/exports/StyleSheet/compiler/index.js index 2710d01b2..7649d9888 100644 --- a/packages/react-native-web/src/exports/StyleSheet/compiler/index.js +++ b/packages/react-native-web/src/exports/StyleSheet/compiler/index.js @@ -379,20 +379,23 @@ function createAtomicRules(identifier: string, property, value): Rules { // Polyfill for additional 'pointer-events' values // See d13f78622b233a0afc0c7a200c0a0792c8ca9e58 + // See https://reactnative.dev/docs/view#pointerevents case 'pointerEvents': { let finalValue = value; - if (value === 'auto' || value === 'box-only') { + if (value === 'auto') { finalValue = 'auto!important'; - if (value === 'box-only') { - const block = createDeclarationBlock({ pointerEvents: 'none' }); - rules.push(`${selector}>*${block}`); - } - } else if (value === 'none' || value === 'box-none') { + } else if (value === 'none') { finalValue = 'none!important'; - if (value === 'box-none') { - const block = createDeclarationBlock({ pointerEvents: 'auto' }); - rules.push(`${selector} * ${block}`); - } + const block = createDeclarationBlock({ pointerEvents: 'none' }); + rules.push(`${selector} * ${block}`); + } else if (value === 'box-none') { + finalValue = 'none!important'; + const block = createDeclarationBlock({ pointerEvents: 'auto' }); + rules.push(`${selector} * ${block}`); + } else if (value === 'box-only') { + finalValue = 'auto!important'; + const block = createDeclarationBlock({ pointerEvents: 'none' }); + rules.push(`${selector} * ${block}`); } const block = createDeclarationBlock({ pointerEvents: finalValue }); rules.push(`${selector}${block}`);