From 1c6bbaf3f3cb3c265864f1afe19c74c3bdee6edd Mon Sep 17 00:00:00 2001
From: Jonas <jonas.kumlin@karlstad.se>
Date: Fri, 13 Dec 2024 13:38:17 +0100
Subject: [PATCH 1/2] Update dropdown.js

---
 src/ui/dropdown.js | 52 ++++++++++++++++++++++++++++++++--------------
 1 file changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/ui/dropdown.js b/src/ui/dropdown.js
index 9abc5f801..91665a873 100644
--- a/src/ui/dropdown.js
+++ b/src/ui/dropdown.js
@@ -15,10 +15,13 @@ export default function Dropdown(options = {}) {
     buttonContainerCls = '',
     style: styleSettings,
     direction = 'down',
-    text = ' ',
     ariaLabel = '',
     buttonTextCls = 'flex'
   } = options;
+  let {
+    text = ' ',
+    items = []
+  } = options;
 
   let containerElement;
   let contentComponent;
@@ -28,31 +31,43 @@ export default function Dropdown(options = {}) {
 
   const style = createStyle(styleSettings);
 
-  const selectItem = function selectItem(item) {
+  const selectItem = function selectItem(item, doClick = true) {
     const customEvt = new CustomEvent('dropdown:select', {
       bubbles: true
     });
     document.getElementById(item.getId()).dispatchEvent(customEvt);
-    dropdownButton.dispatch('click');
+    if (doClick) dropdownButton.dispatch('click');
   };
 
   const setButtonText = function setButtonText(buttonText) {
-    document.getElementById(`${dropdownButton.getId()}`).getElementsByTagName('span')[1].innerHTML = buttonText;
+    text = buttonText;
+    document.getElementById(`${dropdownButton.getId()}`).getElementsByTagName('span')[1].innerHTML = text;
   };
 
+  const getItems = function getItems() {
+    const contentCmps = contentComponent.getComponents();
+    if (contentCmps) return contentCmps;
+    return false;
+  }
+  
   const setItems = function setItems(listItems) {
-    listItems.forEach((listItem) => {
-      const itemEl = El({
-        tagName: 'li',
-        innerHTML: `<span>${listItem}</span>`
-      });
-
-      document.getElementById(contentComponent.getId()).appendChild(html(itemEl.render()));
-
-      document.getElementById(itemEl.getId()).addEventListener('click', () => {
-        selectItem(itemEl);
+    items = listItems;
+    const contentEl = document.getElementById(contentComponent.getId());
+    if (contentEl) {
+      contentComponent.clearComponents();
+      contentEl.replaceChildren();
+      listItems.forEach((listItem) => {
+        const itemEl = El({
+          tagName: 'li',
+          innerHTML: `<span>${listItem}</span>`
+        });
+        contentComponent.addComponent(itemEl);
+        contentEl.appendChild(html(itemEl.render()));
+        document.getElementById(itemEl.getId()).addEventListener('click', () => {
+          selectItem(itemEl);
+        });
       });
-    });
+    }
   };
 
   const toggle = function toggle() {
@@ -64,7 +79,10 @@ export default function Dropdown(options = {}) {
 
   return Component({
     setButtonText,
+    getItems,
     setItems,
+    selectItem,
+    toggle,
     onInit() {
       let position;
 
@@ -75,7 +93,8 @@ export default function Dropdown(options = {}) {
           toggle();
         },
         style: {
-          padding: '0 .5rem'
+          padding: '0 .5rem',
+          overflow: 'hidden'
         },
         icon: `#ic_arrow_drop_${direction}_24px`,
         iconCls: `${buttonIconCls} icon-smaller flex`,
@@ -120,6 +139,7 @@ export default function Dropdown(options = {}) {
     },
     onRender() {
       setButtonText(text);
+      setItems(items);
       this.dispatch('render');
     },
     render() {

From fce8876b52ebd959b233fb47b7c6a30567aae6cf Mon Sep 17 00:00:00 2001
From: Jonas <jonas.kumlin@karlstad.se>
Date: Fri, 13 Dec 2024 13:47:24 +0100
Subject: [PATCH 2/2] Update dropdown.js

---
 src/ui/dropdown.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/dropdown.js b/src/ui/dropdown.js
index 91665a873..263baabf6 100644
--- a/src/ui/dropdown.js
+++ b/src/ui/dropdown.js
@@ -48,8 +48,8 @@ export default function Dropdown(options = {}) {
     const contentCmps = contentComponent.getComponents();
     if (contentCmps) return contentCmps;
     return false;
-  }
-  
+  };
+
   const setItems = function setItems(listItems) {
     items = listItems;
     const contentEl = document.getElementById(contentComponent.getId());