Fixing dropdowns

bokehjs/src/lib/models/widgets/dropdown.ts

@@ -1,13 +1,11 @@
 import {AbstractButton, AbstractButtonView} from "./abstract_button"
-
 import {ButtonClick, MenuItemClick} from "core/bokeh_events"
 import type {StyleSheetLike} from "core/dom"
 import {div, display, undisplay} from "core/dom"
 import type * as p from "core/properties"
 import {isString} from "core/util/types"
 import type {CallbackLike1} from "core/util/callbacks"
 import {execute} from "core/util/callbacks"
-
 import * as buttons from "styles/buttons.css"
 import dropdown_css, * as dropdown from "styles/dropdown.css"
 import carets_css, * as carets from "styles/caret.css"
@@ -16,13 +14,17 @@ export class DropdownView extends AbstractButtonView {
   declare model: Dropdown
 
   protected _open: boolean = false
-
   protected menu: HTMLElement
 
   override stylesheets(): StyleSheetLike[] {
     return [...super.stylesheets(), dropdown_css, carets_css]
   }
 
+  override initialize(): void {
+    super.initialize()
+    this.connect(this.model.properties.menu.change, () => this.rebuild_menu())
+  }
+
   override render(): void {
     super.render()
 
@@ -37,19 +39,9 @@ export class DropdownView extends AbstractButtonView {
       this.group_el.appendChild(toggle)
     }
 
-    const items = this.model.menu.map((item, i) => {
-      if (item == null) {
-        return div({class: dropdown.divider})
-      } else {
-        const label = isString(item) ? item : item[0]
-        const el = div(label)
-        el.addEventListener("click", () => this._item_click(i))
-        return el
-      }
-    })
-
-    this.menu = div({class: [dropdown.menu, dropdown.below]}, items)
+    this.menu = div({class: [dropdown.menu, dropdown.below]})
     this.shadow_el.appendChild(this.menu)
+    this.rebuild_menu()
     undisplay(this.menu)
   }
 
@@ -95,16 +87,38 @@ export class DropdownView extends AbstractButtonView {
 
   protected _item_click(i: number): void {
     this._hide_menu()
-
     const item = this.model.menu[i]
     if (item != null) {
+      const label = isString(item) ? item : item[0] // Extract label from the menu item
       const value_or_callback = isString(item) ? item : item[1]
+
+      this.model.label = label
+
       if (isString(value_or_callback)) {
         this.model.trigger_event(new MenuItemClick(value_or_callback))
       } else {
         void execute(value_or_callback, this.model, {index: i})
       }
+
+      this.render()
+    }
+  }
+
+  rebuild_menu(): void {
+    while (this.menu.firstChild !== null) {
+      this.menu.removeChild(this.menu.firstChild)
     }
+    const items = this.model.menu.map((item, i) => {
+      if (item == null) {
+        return div({class: dropdown.divider})
+      } else {
+        const label = isString(item) ? item : item[0]
+        const el = div(label)
+        el.addEventListener("click", () => this._item_click(i))
+        return el
+      }
+    })
+    items.forEach(item => this.menu.appendChild(item))
   }
 }
 
@@ -131,8 +145,8 @@ export class Dropdown extends AbstractButton {
     this.prototype.default_view = DropdownView
 
     this.define<Dropdown.Props>(({Null, Bool, Str, List, Tuple, Or}) => ({
-      split: [ Bool, false ],
-      menu:  [ List(Or(Str, Tuple(Str, Or(Str /*TODO*/)), Null)), [] ],
+      split: [Bool, false],
+      menu: [List(Or(Str, Tuple(Str, Or(Str /*TODO*/)), Null)), []],
     }))
 
     this.override<Dropdown.Props>({