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 cf44e251a0..e43d4ee3b8 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 @@ -16,7 +16,7 @@ exports[`AppRegistry runApplication styles roots in different documents 1`] = ` ".r-bottom-1p0dtai {bottom: 0px;}", ".r-left-1d2f490 {left: 0px;}", ".r-pointerEvents-105ug2t {pointer-events: auto !important;}", - ".r-pointerEvents-12vffkv>* {pointer-events: auto;}", + ".r-pointerEvents-12vffkv * {pointer-events: auto;}", ".r-pointerEvents-12vffkv {pointer-events: none !important;}", ".r-pointerEvents-633pao {pointer-events: none !important;}", ".r-pointerEvents-ah5dr5>* {pointer-events: none;}", @@ -43,7 +43,7 @@ exports[`AppRegistry runApplication styles roots in different documents 2`] = ` ".r-bottom-1p0dtai {bottom: 0px;}", ".r-left-1d2f490 {left: 0px;}", ".r-pointerEvents-105ug2t {pointer-events: auto !important;}", - ".r-pointerEvents-12vffkv>* {pointer-events: auto;}", + ".r-pointerEvents-12vffkv * {pointer-events: auto;}", ".r-pointerEvents-12vffkv {pointer-events: none !important;}", ".r-pointerEvents-633pao {pointer-events: none !important;}", ".r-pointerEvents-ah5dr5>* {pointer-events: none;}", 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 bc414efc97..c0cb7036e5 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 @@ -176,6 +176,30 @@ describe('StyleSheet/compile', () => { ] `); }); + + test('when parent is pointer-events=box-none, pointer-events=auto applied to children', () => { + const result = atomic({ + pointerEvents: 'box-none' + }); + + expect(result).toMatchInlineSnapshot(` + [ + { + "$$css": true, + "pointerEvents": "r-pointerEvents-12vffkv", + }, + [ + [ + [ + ".r-pointerEvents-12vffkv * {pointer-events:auto;}", + ".r-pointerEvents-12vffkv{pointer-events:none!important;}", + ], + 3, + ], + ], + ] + `); + }); }); describe('classic', () => { 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 639f532c4e..2710d01b27 100644 --- a/packages/react-native-web/src/exports/StyleSheet/compiler/index.js +++ b/packages/react-native-web/src/exports/StyleSheet/compiler/index.js @@ -391,7 +391,7 @@ function createAtomicRules(identifier: string, property, value): Rules { finalValue = 'none!important'; if (value === 'box-none') { const block = createDeclarationBlock({ pointerEvents: 'auto' }); - rules.push(`${selector}>*${block}`); + rules.push(`${selector} * ${block}`); } } const block = createDeclarationBlock({ pointerEvents: finalValue });