[UGUI] Pointer events are not consistent if parent have none and children have auto

[Muchaszewski]

Issue

Consider the following code

    <div style={{backgroundColor: 'yellow', opacity: '0.5', pointerEvents: "none"}}>
      <button style={{pointerEvents: "auto"}} onClick={() => console.log("i was clicked")}>Click me</button>
    </div >

Current outcome

The button is not responsive

Expected outcome

The button can be clicked, and the div is unclickable and does not block the UI/Gameplay Ray casting. So if something is below it's still clickable

Additional info

So there should be the following cases when considering the following hierarchy.

1. RootCanvas
2. ReactUI Canvas 2a) Div 2b) Button

where pe = pointerEvents

• div pe=none + button pe=none -- you can freely press the canvas below above any of the elements
• div pe=none + button pe=auto -- you can press the button and the root canvas below the div
• div pe=auto + button pe=none -- you cannot interact with either canvas or button
• div pr=auto + button pe=auto -- you can only interact with the button as the div will block the root canvas

Note

When div does not have a background color and pointer events, it works as intended, where you can interact with the button and the elements below ReactUICanvas

    <div>
      <button onClick={() => console.log("i was clicked")}>Click me</button>
    </div >

[KurtGokhan]

Not sure if this can be implemented, but will check. This may help when implementing.

[KurtGokhan]

CSS isolation: isolate now sets ignoreParentGroups to true. This could be automated but it is hard to do and may affect performance. Also this resets opacity and it becomes very hard to calculate opacity like browsers. So users should explicitly set isolation: isolate if they want this behavior.

[KurtGokhan]

Added in the v0.14.0