Skip to content

Commit 21342d4

Browse files
staszekscpnecolas
authored andcommitted
Fix pointerEvents propagation
Fix #2801 Close #2802
1 parent 2da322a commit 21342d4

File tree

5 files changed

+22
-21
lines changed

5 files changed

+22
-21
lines changed

packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ exports[`AppRegistry runApplication styles roots in different documents 1`] = `
1616
".r-bottom-1p0dtai {bottom: 0px;}",
1717
".r-left-1d2f490 {left: 0px;}",
1818
".r-pointerEvents-105ug2t {pointer-events: auto !important;}",
19-
".r-pointerEvents-12vffkv * {pointer-events: auto;}",
19+
".r-pointerEvents-12vffkv>* {pointer-events: auto;}",
2020
".r-pointerEvents-12vffkv {pointer-events: none !important;}",
21-
".r-pointerEvents-633pao * {pointer-events: none;}",
21+
".r-pointerEvents-633pao>* {pointer-events: none;}",
2222
".r-pointerEvents-633pao {pointer-events: none !important;}",
23-
".r-pointerEvents-ah5dr5 * {pointer-events: none;}",
23+
".r-pointerEvents-ah5dr5>* {pointer-events: none;}",
2424
".r-pointerEvents-ah5dr5 {pointer-events: auto !important;}",
2525
".r-position-u8s1d {position: absolute;}",
2626
".r-right-zchlnj {right: 0px;}",
@@ -44,11 +44,11 @@ exports[`AppRegistry runApplication styles roots in different documents 2`] = `
4444
".r-bottom-1p0dtai {bottom: 0px;}",
4545
".r-left-1d2f490 {left: 0px;}",
4646
".r-pointerEvents-105ug2t {pointer-events: auto !important;}",
47-
".r-pointerEvents-12vffkv * {pointer-events: auto;}",
47+
".r-pointerEvents-12vffkv>* {pointer-events: auto;}",
4848
".r-pointerEvents-12vffkv {pointer-events: none !important;}",
49-
".r-pointerEvents-633pao * {pointer-events: none;}",
49+
".r-pointerEvents-633pao>* {pointer-events: none;}",
5050
".r-pointerEvents-633pao {pointer-events: none !important;}",
51-
".r-pointerEvents-ah5dr5 * {pointer-events: none;}",
51+
".r-pointerEvents-ah5dr5>* {pointer-events: none;}",
5252
".r-pointerEvents-ah5dr5 {pointer-events: auto !important;}",
5353
".r-position-u8s1d {position: absolute;}",
5454
".r-right-zchlnj {right: 0px;}",

packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,11 @@ describe('AppRegistry', () => {
6161
.r-left-1d2f490{left:0px;}
6262
.r-maxWidth-dnmrzs{max-width:100%;}
6363
.r-pointerEvents-105ug2t{pointer-events:auto!important;}
64-
.r-pointerEvents-12vffkv * {pointer-events:auto;}
64+
.r-pointerEvents-12vffkv>* {pointer-events:auto;}
6565
.r-pointerEvents-12vffkv{pointer-events:none!important;}
66-
.r-pointerEvents-633pao * {pointer-events:none;}
66+
.r-pointerEvents-633pao>* {pointer-events:none;}
6767
.r-pointerEvents-633pao{pointer-events:none!important;}
68-
.r-pointerEvents-ah5dr5 * {pointer-events:none;}
68+
.r-pointerEvents-ah5dr5>* {pointer-events:none;}
6969
.r-pointerEvents-ah5dr5{pointer-events:auto!important;}
7070
.r-position-u8s1d{position:absolute;}
7171
.r-right-zchlnj{right:0px;}
@@ -120,11 +120,11 @@ describe('AppRegistry', () => {
120120
.r-left-1d2f490{left:0px;}
121121
.r-maxWidth-dnmrzs{max-width:100%;}
122122
.r-pointerEvents-105ug2t{pointer-events:auto!important;}
123-
.r-pointerEvents-12vffkv * {pointer-events:auto;}
123+
.r-pointerEvents-12vffkv>* {pointer-events:auto;}
124124
.r-pointerEvents-12vffkv{pointer-events:none!important;}
125-
.r-pointerEvents-633pao * {pointer-events:none;}
125+
.r-pointerEvents-633pao>* {pointer-events:none;}
126126
.r-pointerEvents-633pao{pointer-events:none!important;}
127-
.r-pointerEvents-ah5dr5 * {pointer-events:none;}
127+
.r-pointerEvents-ah5dr5>* {pointer-events:none;}
128128
.r-pointerEvents-ah5dr5{pointer-events:auto!important;}
129129
.r-position-u8s1d{position:absolute;}
130130
.r-right-zchlnj{right:0px;}
@@ -172,11 +172,11 @@ describe('AppRegistry', () => {
172172
.r-left-1d2f490{left:0px;}
173173
.r-maxWidth-dnmrzs{max-width:100%;}
174174
.r-pointerEvents-105ug2t{pointer-events:auto!important;}
175-
.r-pointerEvents-12vffkv * {pointer-events:auto;}
175+
.r-pointerEvents-12vffkv>* {pointer-events:auto;}
176176
.r-pointerEvents-12vffkv{pointer-events:none!important;}
177-
.r-pointerEvents-633pao * {pointer-events:none;}
177+
.r-pointerEvents-633pao>* {pointer-events:none;}
178178
.r-pointerEvents-633pao{pointer-events:none!important;}
179-
.r-pointerEvents-ah5dr5 * {pointer-events:none;}
179+
.r-pointerEvents-ah5dr5>* {pointer-events:none;}
180180
.r-pointerEvents-ah5dr5{pointer-events:auto!important;}
181181
.r-position-u8s1d{position:absolute;}
182182
.r-right-zchlnj{right:0px;}

packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-test.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ describe('StyleSheet/compile', () => {
142142
],
143143
[
144144
[
145-
".r-pointerEvents-ah5dr5 * {pointer-events:none;}",
145+
".r-pointerEvents-ah5dr5>* {pointer-events:none;}",
146146
".r-pointerEvents-ah5dr5{pointer-events:auto!important;}",
147147
],
148148
3,
@@ -191,7 +191,7 @@ describe('StyleSheet/compile', () => {
191191
[
192192
[
193193
[
194-
".r-pointerEvents-633pao * {pointer-events:none;}",
194+
".r-pointerEvents-633pao>* {pointer-events:none;}",
195195
".r-pointerEvents-633pao{pointer-events:none!important;}",
196196
],
197197
3,
@@ -215,7 +215,7 @@ describe('StyleSheet/compile', () => {
215215
[
216216
[
217217
[
218-
".r-pointerEvents-12vffkv * {pointer-events:auto;}",
218+
".r-pointerEvents-12vffkv>* {pointer-events:auto;}",
219219
".r-pointerEvents-12vffkv{pointer-events:none!important;}",
220220
],
221221
3,

packages/react-native-web/src/exports/StyleSheet/compiler/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -387,15 +387,15 @@ function createAtomicRules(identifier: string, property, value): Rules {
387387
} else if (value === 'none') {
388388
finalValue = 'none!important';
389389
const block = createDeclarationBlock({ pointerEvents: 'none' });
390-
rules.push(`${selector} * ${block}`);
390+
rules.push(`${selector}>* ${block}`);
391391
} else if (value === 'box-none') {
392392
finalValue = 'none!important';
393393
const block = createDeclarationBlock({ pointerEvents: 'auto' });
394-
rules.push(`${selector} * ${block}`);
394+
rules.push(`${selector}>* ${block}`);
395395
} else if (value === 'box-only') {
396396
finalValue = 'auto!important';
397397
const block = createDeclarationBlock({ pointerEvents: 'none' });
398-
rules.push(`${selector} * ${block}`);
398+
rules.push(`${selector}>* ${block}`);
399399
}
400400
const block = createDeclarationBlock({ pointerEvents: finalValue });
401401
rules.push(`${selector}${block}`);

packages/react-native-web/src/modules/createDOMProps/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -879,6 +879,7 @@ const createDOMProps = (elementType, props, options) => {
879879
`props.pointerEvents is deprecated. Use style.pointerEvents`
880880
);
881881
}
882+
882883
const [className, inlineStyle] = StyleSheet(
883884
[style, pointerEvents && pointerEventsStyles[pointerEvents]],
884885
{

0 commit comments

Comments
 (0)