Use pointer-events instead of z-index to fix the hover state

When changing z-index, the DOM does not send the mouse-over event to the
hovered element, however it works fine when using pointer-events.

1 files changed, 8 insertions, 7 deletions

diff --git a/gui/src/renderer/components/TransitionContainer.tsx b/gui/src/renderer/components/TransitionContainer.tsx
index 8ef9611ac0..9f7056888a 100644
--- a/gui/src/renderer/components/TransitionContainer.tsx
+++ b/gui/src/renderer/components/TransitionContainer.tsx
@@ -36,9 +36,9 @@ const styles = {
   transitionView: Styles.createViewStyle({
     flex: 1,
   }),
-  userInteractionBlocker: Styles.createViewStyle({
+  blockUserInteraction: Styles.createViewStyle({
     // @ts-ignore
-    zIndex: 2,
+    pointerEvents: 'none',
   }),
   transitionContainer: Styles.createViewStyle({
     flex: 1,
@@ -150,7 +150,12 @@ export default class TransitionContainer extends Component<IProps, IState> {
       this.state.itemQueue.length > 0 || this.state.nextItem ? true : false;
 
     return (
-      <View style={styles.transitionContainer} onLayout={this.onLayout}>
+      <View
+        style={[
+          styles.transitionContainer,
+          disableUserInteraction ? styles.blockUserInteraction : undefined,
+        ]}
+        onLayout={this.onLayout}>
         {this.state.currentItem && (
           <Animated.View
             key={this.state.currentItem.view.props.viewId}
@@ -166,10 +171,6 @@ export default class TransitionContainer extends Component<IProps, IState> {
             {this.state.nextItem.view}
           </Animated.View>
         )}
-
-        {disableUserInteraction && (
-          <View style={[styles.animatedContainer, styles.userInteractionBlocker]} />
-        )}
       </View>
     );
   }