import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { next } from '@ember/runloop';
import { set } from '@ember/object';

import Slotted from 'block-slots';

export default Component.extend(Slotted, {
  tagName: '',
  dom: service('dom'),
  isConfirmation: false,
  actions: {
    connect: function($el) {
      next(() => {
        // if theres only a single choice in the menu and it doesn't have an
        // immediate button/link/label to click then it will be a
        // confirmation/informed action
        const isConfirmationMenu = this.dom.element(
          'li:only-child > [role="menu"]:first-child',
          $el
        );
        set(this, 'isConfirmation', typeof isConfirmationMenu !== 'undefined');
      });
    },
    change: function(e) {
      const id = e.target.getAttribute('id');
      const $trigger = this.dom.element(`[for='${id}']`);
      const $panel = this.dom.element('[role=menu]', $trigger.parentElement);
      const $menuPanel = this.dom.closest('.menu-panel', $panel);
      if (e.target.checked) {
        $panel.style.display = 'block';
        const height = $panel.offsetHeight + 2;
        $menuPanel.style.maxHeight = $menuPanel.style.minHeight = `${height}px`;
      } else {
        $panel.style.display = null;
        $menuPanel.style.maxHeight = null;
        $menuPanel.style.minHeight = '0';
      }
    },
  },
});

@@ -367,16 +367,50 @@
 () =%3E %7B%0A
+        if(!this.isDestroyed) %7B%0A  
         
@@ -482,24 +482,26 @@
  an%0A        
+  
 // immediate
@@ -554,16 +554,18 @@
         
+ 
+ 
 // confi
@@ -588,16 +588,18 @@
  action%0A
+  
         
@@ -653,16 +653,18 @@
         
+ 
+ 
 'li:only
@@ -700,16 +700,18 @@
 child',%0A
+  
         
@@ -724,19 +724,23 @@
         
+  
 );%0A
+  
         
@@ -807,24 +807,34 @@
 ndefined');%0A
+        %7D%0A
       %7D);%0A  

Add an isDestroyed check for the MenuPanel component (#11104)