Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Pointer event is not applied for grand-children #2606

Open
1 task done
tienifr opened this issue Nov 10, 2023 · 0 comments
Open
1 task done

Pointer event is not applied for grand-children #2606

tienifr opened this issue Nov 10, 2023 · 0 comments
Labels

Comments

@tienifr
Copy link
Contributor

tienifr commented Nov 10, 2023

Is there an existing issue for this?

  • I have searched the existing issues

Describe the issue

There's a box-none value in RN web but currently it's implemented incorrectly. Currently the child elements of it 's implemented like parent > *: { pointer-events: auto } (see here) which only affects direct children. So the grand-children will still inherit the pointer-events: none

Expected behavior

All components inside parent that has pointer-events: box-none should be pointer-events: auto

Steps to reproduce

  1. Create the container View that has pointer-events: none
  2. Inside that View, create the child View that has pointer-events: box-none
  3. Inside child View, create the View within onClick function
  4. Observe that onClick function is not trigger

Test case

https://codesandbox.io/s/crazy-chihiro-yz9y4k

Additional comments

No response

Proposed solution

Update to the pattern parent *: { pointer-events: auto } so it affects all children. That means updating the >* to * in this line

This is recommended in the RN doc as well https://reactnative.dev/docs/view#pointerevents.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant