From aa9a5a89bdb3e27f0f62ffc369d1780db50cbab2 Mon Sep 17 00:00:00 2001
From: Tommy Hallman Lindh <tommy.lindh@lime.tech>
Date: Fri, 15 Sep 2023 16:18:00 +0200
Subject: [PATCH 1/2] refactor(menu-list): cleanup unused code

---
 src/components/menu-list/menu-list.tsx | 23 +----------------------
 1 file changed, 1 insertion(+), 22 deletions(-)

diff --git a/src/components/menu-list/menu-list.tsx b/src/components/menu-list/menu-list.tsx
index f0d8fe0164..5c775b5ae6 100644
--- a/src/components/menu-list/menu-list.tsx
+++ b/src/components/menu-list/menu-list.tsx
@@ -4,10 +4,8 @@ import {
     MenuItem,
     MenuListType,
 } from '../../interface';
-import { MDCList, MDCListActionEvent } from '@material/list';
 import { MDCMenu, MDCMenuItemEvent } from '@material/menu';
 import { MDCRipple } from '@material/ripple';
-import { strings as listStrings } from '@material/list/constants';
 import { strings as menuStrings } from '@material/menu/constants';
 import {
     Component,
@@ -21,7 +19,6 @@ import {
 import { MenuListRenderer } from './menu-list-renderer';
 import { MenuListRendererConfig } from './menu-list-renderer-config';
 
-const { ACTION_EVENT } = listStrings;
 const { SELECTED_EVENT } = menuStrings;
 
 /**
@@ -73,7 +70,6 @@ export class MenuList {
 
     private config: MenuListRendererConfig;
     private MenuListRenderer = new MenuListRenderer();
-    private mdcList: MDCList;
     private mdcMenu: MDCMenu;
 
     /**
@@ -112,17 +108,7 @@ export class MenuList {
     }
 
     @Watch('items')
-    protected itemsChanged() {
-        if (!this.mdcList) {
-            return;
-        }
-
-        const MenuItems = this.items.filter(this.isMenuItem);
-
-        this.mdcList.selectedIndex = MenuItems.findIndex(
-            (item: MenuItem) => item.selected
-        );
-    }
+    protected itemsChanged() {}
 
     private setup = () => {
         this.setupMenu();
@@ -151,17 +137,10 @@ export class MenuList {
     };
 
     private teardown = () => {
-        this.mdcList?.unlisten(ACTION_EVENT, this.handleAction);
-        this.mdcList?.destroy();
-
         this.mdcMenu?.unlisten(SELECTED_EVENT, this.handleMenuSelect);
         this.mdcMenu?.destroy();
     };
 
-    private handleAction = (event: MDCListActionEvent) => {
-        this.handleSingleSelect(event.detail.index);
-    };
-
     private handleMenuSelect = (event: MDCMenuItemEvent) => {
         this.handleSingleSelect(event.detail.index);
     };

From 751aa2a891a40144ac5fe49c38b09af434ba38b7 Mon Sep 17 00:00:00 2001
From: Tommy Hallman Lindh <tommy.lindh@lime.tech>
Date: Fri, 15 Sep 2023 16:22:50 +0200
Subject: [PATCH 2/2] fix(menu-list): recreate the mdcmenu on item change

This because the mdcMenu.Items isn't in sync with
the rendered items thus prevent keyboard navigation
---
 src/components/menu-list/menu-list.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/menu-list/menu-list.tsx b/src/components/menu-list/menu-list.tsx
index 5c775b5ae6..9750d5de1e 100644
--- a/src/components/menu-list/menu-list.tsx
+++ b/src/components/menu-list/menu-list.tsx
@@ -108,7 +108,11 @@ export class MenuList {
     }
 
     @Watch('items')
-    protected itemsChanged() {}
+    protected itemsChanged() {
+        setTimeout(() => {
+            this.setup();
+        }, 0);
+    }
 
     private setup = () => {
         this.setupMenu();
@@ -116,6 +120,11 @@ export class MenuList {
     };
 
     private setupMenu = () => {
+        if (this.mdcMenu) {
+            this.teardown();
+            this.mdcMenu = null;
+        }
+
         const element = this.element.shadowRoot.querySelector('.mdc-menu');
         if (!element) {
             return;