[EuiContextMenu] Fix post-transition unclickable menu items (#3656)

* remove comma causing prop type warnings * move transition flag to be fully controlled by parent state * CL
elastic · Jun 25, 2020 · 70aa5fc · 70aa5fc
1 parent 748d047
commit 70aa5fc
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 - Added `gutterSize` prop to `EuiFacetGroup` ([#3639](https://github.com/elastic/eui/pull/3639))
 
+**Bug fixes**
+
+- Fixed `EuiContextMenu` panel `onAnimationEnd` transition bug in Chrome ([#3656](https://github.com/elastic/eui/pull/3656))
+
 ## [`26.1.0`](https://github.com/elastic/eui/tree/v26.1.0)
 
 - Optimized in-memory datagrid mount performance ([#3628](https://github.com/elastic/eui/pull/3628))

diff --git a/src-docs/src/views/context_menu/context_menu.js b/src-docs/src/views/context_menu/context_menu.js
@@ -94,7 +94,6 @@ export default () => {
             window.alert('Permalinks');
           },
         },
-        ,
       ],
     },
     {

diff --git a/src/components/context_menu/context_menu_panel.tsx b/src/components/context_menu/context_menu_panel.tsx
@@ -79,7 +79,6 @@ interface State {
     items: Props['items'];
   };
   menuItems: HTMLElement[];
-  isTransitioning: boolean;
   focusedItemIndex?: number;
   currentHeight?: number;
   height?: number;
@@ -104,7 +103,6 @@ export class EuiContextMenuPanel extends Component<Props, State> {
         items: this.props.items,
       },
       menuItems: [],
-      isTransitioning: Boolean(props.transitionType),
       focusedItemIndex: props.initialFocusedItemIndex,
       currentHeight: undefined,
     };
@@ -226,7 +224,7 @@ export class EuiContextMenuPanel extends Component<Props, State> {
 
       // Setting focus while transitioning causes the animation to glitch, so we have to wait
       // until it's finished before we focus anything.
-      if (this.state.isTransitioning) {
+      if (this.props.transitionType) {
         return;
       }
 
@@ -261,10 +259,6 @@ export class EuiContextMenuPanel extends Component<Props, State> {
   }
 
   onTransitionComplete = () => {
-    this.setState({
-      isTransitioning: false,
-    });
-
     if (this.props.onTransitionComplete) {
       this.props.onTransitionComplete();
     }
@@ -293,11 +287,6 @@ export class EuiContextMenuPanel extends Component<Props, State> {
       nextState.prevProps = { items: nextProps.items };
     }
 
-    if (nextProps.transitionType) {
-      needsUpdate = true;
-      nextState.isTransitioning = true;
-    }
-
     if (needsUpdate) {
       return nextState;
     }
@@ -349,7 +338,7 @@ export class EuiContextMenuPanel extends Component<Props, State> {
       return true;
     }
 
-    if (nextState.isTransitioning !== this.state.isTransitioning) {
+    if (nextProps.transitionType !== this.props.transitionType) {
       return true;
     }
 
@@ -470,8 +459,7 @@ export class EuiContextMenuPanel extends Component<Props, State> {
     const classes = classNames(
       'euiContextMenuPanel',
       className,
-      this.state.isTransitioning &&
-        transitionDirection &&
+      transitionDirection &&
         transitionType &&
         transitionDirectionAndTypeToClassNameMap[transitionDirection]
         ? transitionDirectionAndTypeToClassNameMap[transitionDirection][