Browse Source

fix(ui): prevent onboarding back button from receiving events when it's "hidden" (#30288)

* fix(ui): prevent onboarding back button from receiving events when disabled

* fix(ui): toggle hidden using transitionEnd
Jonas 3 years ago
parent
commit
f566ee482a
1 changed files with 12 additions and 3 deletions
  1. 12 3
      static/app/views/onboarding/onboarding.tsx

+ 12 - 3
static/app/views/onboarding/onboarding.tsx

@@ -301,9 +301,18 @@ const Back = styled(({className, animate, ...props}: BackProps) => (
     animate={animate}
     transition={testableTransition()}
     variants={{
-      initial: {opacity: 0},
-      visible: {opacity: 1, transition: testableTransition({delay: 1})},
-      hidden: {opacity: 0},
+      initial: {opacity: 0, visibility: 'hidden'},
+      visible: {
+        opacity: 1,
+        visibility: 'visible',
+        transition: testableTransition({delay: 1}),
+      },
+      hidden: {
+        opacity: 0,
+        transitionEnd: {
+          visibility: 'hidden',
+        },
+      },
     }}
   >
     <Button {...props} icon={<IconChevron direction="left" size="sm" />} priority="link">