@simplysm/angular 14.0.10 → 14.0.12

package/src/features/shared-data/matchesSearchText.ts

@@ -0,0 +1,16 @@
+export function matchesSearchText(
+  itemText: string,
+  searchQuery: string | undefined,
+): boolean {
+  const terms =
+    searchQuery
+      ?.trim()
+      .split(" ")
+      .map((t) => t.trim())
+      .filter((t) => t !== "") ?? [];
+
+  if (terms.length === 0) return true;
+
+  const lowerItemText = itemText.toLowerCase();
+  return terms.every((term) => lowerItemText.includes(term.toLowerCase()));
+}

package/src/features/shared-data/sd-shared-data-select-button.control.ts

@@ -46,10 +46,10 @@ import type { TSelectModeValue } from "../../ui/form/select/sd-select.control";
   `,
 })
 export class SdSharedDataSelectButtonControl<
-  TItem extends ISharedDataBase<number>,
-  TMode extends keyof TSelectModeValue<number>,
+  TItem extends ISharedDataBase<string | number>,
+  TMode extends keyof TSelectModeValue<string | number>,
   TModal extends ISdSelectModal<any>,
-> extends AbsSdDataSelectButton<TItem, number, TMode> {
+> extends AbsSdDataSelectButton<TItem, string | number, TMode> {
   items = input<TItem[]>([]);
   modal = input.required<TSdSelectModalInfo<TModal>>();
 
@@ -58,7 +58,7 @@ export class SdSharedDataSelectButtonControl<
     { read: TemplateRef },
   );
 
-  override load(keys: number[]): TItem[] {
+  override load(keys: (string | number)[]): TItem[] {
     return this.items().filter((item) => keys.includes(item.__valueKey));
   }
 }

package/src/features/shared-data/sd-shared-data-select-list.control.ts

@@ -15,6 +15,7 @@ import {
   ViewEncapsulation,
 } from "@angular/core";
 import { str } from "@simplysm/core-common";
+import { matchesSearchText } from "./matchesSearchText";
 import type { ISharedDataBase } from "../../core/providers/sd-shared-data.provider";
 import {
   SdItemOfTemplateDirective,
@@ -163,20 +164,13 @@ export class SdSharedDataSelectListControl<
 
   pageItemCount = input<number>();
   page = signal(0);
-  pageLength = computed(() => {
-    const pic = this.pageItemCount();
-    if (pic != null && pic > 0) {
-      return Math.ceil(this.items().length / pic);
-    }
-    return 0;
-  });
 
-  displayItems = computed(() => {
+  private readonly _filteredItems = computed(() => {
     let result = this.items().filter((item) => !item.__isHidden);
 
     if (!str.isNullOrEmpty(this.searchText())) {
       result = result.filter((item) =>
-        item.__searchText.includes(this.searchText()!),
+        matchesSearchText(item.__searchText, this.searchText()),
       );
     }
 
@@ -184,12 +178,26 @@ export class SdSharedDataSelectListControl<
       result = result.filter((item, i) => this.filterFn()!(item, i));
     }
 
+    return result;
+  });
+
+  pageLength = computed(() => {
+    const pic = this.pageItemCount();
+    if (pic != null && pic > 0) {
+      return Math.ceil(this._filteredItems().length / pic);
+    }
+    return 0;
+  });
+
+  displayItems = computed(() => {
+    const filtered = this._filteredItems();
+
     const pic = this.pageItemCount();
     if (pic != null && pic > 0) {
-      result = result.slice(pic * this.page(), pic * (this.page() + 1));
+      return filtered.slice(pic * this.page(), pic * (this.page() + 1));
     }
 
-    return result;
+    return filtered;
   });
 
   constructor() {

package/src/features/shared-data/sd-shared-data-select.control.ts

@@ -35,6 +35,7 @@ import type {
 } from "../../ui/form/button/sd-modal-select-button.control";
 import { NgIcon } from "@ng-icons/core";
 import { tablerEdit, tablerSearch } from "@ng-icons/tabler-icons";
+import { matchesSearchText } from "./matchesSearchText";
 
 @Component({
   selector: "sd-shared-data-select",
@@ -235,6 +236,46 @@ export class SdSharedDataSelectControl<
     return result;
   });
 
+  private readonly _searchTextMatchCache = computed(() => {
+    const cache = new Map<TItem["__valueKey"], boolean>();
+    const searchText = this.searchText();
+    const getSearchTextFn = this.getSearchTextFn();
+    const hasParent = this.hasParentKey();
+    const parentMap = this.itemByParentKeyMap();
+    const items = this.items();
+
+    const check = (item: TItem, index: number): boolean => {
+      const key = item.__valueKey;
+      const cached = cache.get(key);
+      if (cached !== undefined) return cached;
+
+      const itemText = getSearchTextFn(item, index);
+      if (matchesSearchText(itemText, searchText)) {
+        cache.set(key, true);
+        return true;
+      }
+
+      if (hasParent && parentMap != null) {
+        const children = parentMap.get(key as TItem["__valueKey"]) ?? [];
+        for (let i = 0; i < children.length; i++) {
+          if (check(children[i], i)) {
+            cache.set(key, true);
+            return true;
+          }
+        }
+      }
+
+      cache.set(key, false);
+      return false;
+    };
+
+    for (let i = 0; i < items.length; i++) {
+      check(items[i], i);
+    }
+
+    return cache;
+  });
+
   selectedKeys = computed((): any[] => {
     const val = this.value();
     if (val == null) return [];
@@ -243,19 +284,22 @@ export class SdSharedDataSelectControl<
   });
 
   constructor() {
-    // 드롭다운 닫힘 시 검색어 초기화
+    // 드롭다운 닫힘 시 검색어 초기화 (open → closed 전환 시에만)
+    let prevOpen = false;
     effect(() => {
       const ctrl = this._selectCtrl();
-      if (ctrl != null) {
-        ctrl.dropdownOpen();
+      const currentOpen = ctrl != null ? ctrl.dropdownOpen() : false;
+
+      if (prevOpen && !currentOpen) {
+        untracked(() => this.searchText.set(undefined));
       }
-      untracked(() => this.searchText.set(undefined));
+      prevOpen = currentOpen;
     });
   }
 
   getItemSelectable(item: TItem, _index: number, depth: number): boolean {
     if (!this.hasParentKey()) return true;
-    // depth가 0이면서 자식을 가진 항목(카테고리)은 선택 불가
+    // 트리 구조에서 depth가 0이면서 __parentKey가 있는 항목은 선택 불가
     return depth !== 0 || item.__parentKey == null;
   }
 
@@ -273,32 +317,8 @@ export class SdSharedDataSelectControl<
     return false;
   }
 
-  isIncludeSearchText(item: TItem, index: number): boolean {
-    const splitSearchTexts =
-      this.searchText()
-        ?.trim()
-        .split(" ")
-        .map((t) => t.trim())
-        .filter((t) => t !== "") ?? [];
-
-    if (splitSearchTexts.length === 0) return true;
-
-    const itemText = this.getSearchTextFn()(item, index);
-    for (const term of splitSearchTexts) {
-      if (!itemText.toLowerCase().includes(term.toLowerCase())) {
-        // 트리 구조에서 자식 중 매칭 항목 확인
-        if (this.hasParentKey()) {
-          const children = this.getChildren(item);
-          for (let i = 0; i < children.length; i++) {
-            if (this.isIncludeSearchText(children[i], i)) {
-              return true;
-            }
-          }
-        }
-        return false;
-      }
-    }
-    return true;
+  isIncludeSearchText(item: TItem, _index: number): boolean {
+    return this._searchTextMatchCache().get(item.__valueKey) ?? false;
   }
 
   getChildren = (item: ISharedDataBase<string | number>): TItem[] => {

package/src/index.ts

@@ -65,6 +65,7 @@ export {
 } from "./core/utils/useExpandingManager";
 export { useSelectionManager } from "./core/utils/useSelectionManager";
 export { injectParent } from "./core/utils/injectParent";
+export { withBusy } from "./core/utils/withBusy";
 
 // features/address
 export {
@@ -72,6 +73,9 @@ export {
   type IAddress,
 } from "./features/address/sd-address-search.modal";
 
+// features/permission-table
+export { SdPermissionTableControl } from "./features/permission-table/sd-permission-table.control";
+
 // features
 export { SdBaseContainerControl } from "./features/base/sd-base-container.control";
 export {
@@ -172,10 +176,7 @@ export { SdPaginationControl } from "./ui/navigation/pagination/sd-pagination.co
 // ui/navigation/sidebar
 export { SdSidebarContainerControl } from "./ui/navigation/sidebar/sd-sidebar-container.control";
 export { SdSidebarControl } from "./ui/navigation/sidebar/sd-sidebar.control";
-export {
-  SdSidebarMenuControl,
-  type ISdSidebarMenu,
-} from "./ui/navigation/sidebar/sd-sidebar-menu.control";
+export { SdSidebarMenuControl } from "./ui/navigation/sidebar/sd-sidebar-menu.control";
 export {
   SdSidebarUserControl,
   type ISidebarUserMenu,
@@ -184,10 +185,7 @@ export {
 // ui/navigation/topbar
 export { SdTopbarContainerControl } from "./ui/navigation/topbar/sd-topbar-container.control";
 export { SdTopbarControl } from "./ui/navigation/topbar/sd-topbar.control";
-export {
-  SdTopbarMenuControl,
-  type ISdTopbarMenu,
-} from "./ui/navigation/topbar/sd-topbar-menu.control";
+export { SdTopbarMenuControl } from "./ui/navigation/topbar/sd-topbar-menu.control";
 export {
   SdTopbarUserControl,
   type ISdTopbarUserMenu,
@@ -206,6 +204,7 @@ export type {
   ISdSheetConfig,
   ISdSheetHeaderDef,
   ISdSheetItemKeydownEventParam,
+  ISdSheetCellKeydownEventParam,
 } from "./ui/data/sheet/types";
 
 // ui/visual

package/src/ui/data/sheet/sd-sheet.control.ts

@@ -35,6 +35,7 @@ import { SdAnchorControl } from "../../form/button/sd-anchor.control";
 import { SdButtonControl } from "../../form/button/sd-button.control";
 import type {
   ISdSheetColumnDef,
+  ISdSheetCellKeydownEventParam,
   ISdSheetConfig,
   ISdSheetHeaderDef,
   ISdSheetItemKeydownEventParam,
@@ -356,7 +357,7 @@ export class SdSheetControl<T> {
 
   // Outputs
   itemKeydown = output<ISdSheetItemKeydownEventParam<T>>();
-  cellKeydown = output<ISdSheetItemKeydownEventParam<T>>();
+  cellKeydown = output<ISdSheetCellKeydownEventParam<T>>();
 
   // Models
   selectedItems = model<T[]>([]);
@@ -496,41 +497,49 @@ export class SdSheetControl<T> {
     return col?.summaryTplRef() ?? null;
   }
 
-  getHeaderCellStyle(cell: ISdSheetHeaderDef) {
-    const parts: string[] = [];
-    if (cell.colDef != null) {
-      const baseStyle = this._getColDefStyle(cell.colDef);
-      if (baseStyle != null) {
-        parts.push(baseStyle);
-      }
-      const fixedStyle = this._getFixedStyle(cell.colDef);
-      if (fixedStyle != null) {
-        parts.push(fixedStyle);
-      }
+  // Pre-computed column styles: header/footer (fixed z-index:3)
+  private readonly _headerColumnStyles = computed(() => {
+    const map = new Map<string, string | null>();
+    for (const colDef of this.layout.columnDefs()) {
+      const parts: string[] = [];
+      const colStyle = this._getColDefStyle(colDef);
+      if (colStyle != null) parts.push(colStyle);
+      const fixedStyle = this._getFixedStyle(colDef, 3, "var(--theme-secondary-lightest)");
+      if (fixedStyle != null) parts.push(fixedStyle);
+      map.set(colDef.key, parts.length > 0 ? parts.join("; ") : null);
     }
-    return parts.length > 0 ? parts.join("; ") : null;
+    return map;
+  });
+
+  // Pre-computed column styles: body (fixed z-index:1)
+  private readonly _dataColumnBaseStyles = computed(() => {
+    const map = new Map<string, string | null>();
+    for (const colDef of this.layout.columnDefs()) {
+      const parts: string[] = [];
+      const colStyle = this._getColDefStyle(colDef);
+      if (colStyle != null) parts.push(colStyle);
+      const fixedStyle = this._getFixedStyle(colDef);
+      if (fixedStyle != null) parts.push(fixedStyle);
+      map.set(colDef.key, parts.length > 0 ? parts.join("; ") : null);
+    }
+    return map;
+  });
+
+  getHeaderCellStyle(cell: ISdSheetHeaderDef) {
+    if (cell.colDef == null) return null;
+    return this._headerColumnStyles().get(cell.colDef.key) ?? null;
   }
 
   getCellStyle(item: T, colDef: ISdSheetColumnDef) {
-    const parts: string[] = [];
-    const baseStyle = this._getColDefStyle(colDef);
-    if (baseStyle != null) {
-      parts.push(baseStyle);
-    }
-    const fixedStyle = this._getFixedStyle(colDef);
-    if (fixedStyle != null) {
-      parts.push(fixedStyle);
-    }
+    const baseStyle = this._dataColumnBaseStyles().get(colDef.key) ?? null;
     const styleFn = this.getItemCellStyleFn();
     const customStyle = styleFn != null ? styleFn(item, colDef.key) : undefined;
-    if (customStyle != null) {
-      parts.push(customStyle);
-    }
-    return parts.length > 0 ? parts.join("; ") : null;
+    if (baseStyle != null && customStyle != null) return `${baseStyle}; ${customStyle}`;
+    return customStyle ?? baseStyle ?? null;
   }
 
   getFixedCellStyle(colDef: ISdSheetColumnDef) {
-    return this._getFixedStyle(colDef);
+    return this._getFixedStyle(colDef, 3);
   }
 
   getSelectableTooltip(item: T): string | null {
@@ -593,8 +602,11 @@ export class SdSheetControl<T> {
     return this.expanding.def(item);
   }
 
+  // PERF-005: Set-based lookup for O(1) isExpanded check
+  private readonly _expandedSet = computed(() => new Set(this.expandedItems()));
+
   isExpanded(item: T): boolean {
-    return this.expandedItems().includes(item);
+    return this._expandedSet().has(item);
   }
 
   getAriaExpanded(item: T): string | null {
@@ -617,34 +629,25 @@ export class SdSheetControl<T> {
   }
 
   private _getColDefStyle(colDef: { width: string | undefined; collapse: boolean }): string | null {
-    const parts: string[] = [];
-    if (colDef.width != null) {
-      parts.push(`width: ${colDef.width}`);
-      parts.push(`min-width: ${colDef.width}`);
-      parts.push(`max-width: ${colDef.width}`);
-    }
     if (colDef.collapse) {
-      parts.push("padding: 0");
-      parts.push("width: 0");
-      parts.push("min-width: 0");
-      parts.push("max-width: 0");
-      parts.push("overflow: hidden");
-      parts.push("border: none");
+      return "padding: 0; width: 0; min-width: 0; max-width: 0; overflow: hidden; border: none";
     }
-    return parts.length > 0 ? parts.join("; ") : null;
+    if (colDef.width != null) {
+      return `width: ${colDef.width}; min-width: ${colDef.width}; max-width: ${colDef.width}`;
+    }
+    return null;
   }
 
-  private _getFixedStyle(colDef: ISdSheetColumnDef): string | null {
+  private _getFixedStyle(
+    colDef: ISdSheetColumnDef,
+    zIndex: number = 1,
+    background: string = "var(--control-color)",
+  ): string | null {
     const fixedLeftMap = this.fixing.fixedLeftMap();
     const leftValue = fixedLeftMap.get(colDef.key);
     if (leftValue == null) return null;
 
-    const parts: string[] = [];
-    parts.push("position: sticky");
-    parts.push(`left: ${leftValue}px`);
-    parts.push("z-index: 1");
-    parts.push("background: var(--control-color)");
-    return parts.join("; ");
+    return `position: sticky; left: ${leftValue}px; z-index: ${zIndex}; background: ${background}`;
   }
 
   getDataCellClass(item: T, colDef: ISdSheetColumnDef, r: number, c: number): string | null {

package/src/ui/data/sheet/types.ts

@@ -32,6 +32,11 @@ export interface ISdSheetConfig {
 
 export interface ISdSheetItemKeydownEventParam<T> {
   item: T;
-  key?: string;
+  event: KeyboardEvent;
+}
+
+export interface ISdSheetCellKeydownEventParam<T> {
+  item: T;
+  key: string;
   event: KeyboardEvent;
 }

package/src/ui/data/sheet/useSheetCellAgent.ts

@@ -20,11 +20,11 @@ export function useSheetCellAgent(options: {
   }
 
   function _enterEditMode(r: number, c: number): void {
-    const cell = options.domAccessor.getCell(r, c);
-    if (cell == null) return;
     editModeCellAddr.set({ r, c });
-    // Focus first focusable child after edit mode is set
+    // Re-query DOM inside queueMicrotask to avoid stale reference after Angular re-render
     queueMicrotask(() => {
+      const cell = options.domAccessor.getCell(r, c);
+      if (cell == null) return;
       const focusable = cell.findFirstFocusableChild();
       if (focusable !== undefined) {
         focusable.focus();
@@ -181,6 +181,7 @@ export function useSheetCellAgent(options: {
 
     // Ctrl+C (copy)
     if (event.key === "c" && event.ctrlKey && !event.altKey && !event.shiftKey) {
+      if (!("clipboard" in navigator)) return;
       const td = _getClosestDataCell(target);
       if (td == null) return;
       if (td !== target) return; // Only when td itself is focused
@@ -198,6 +199,7 @@ export function useSheetCellAgent(options: {
 
     // Ctrl+V (paste)
     if (event.key === "v" && event.ctrlKey && !event.altKey && !event.shiftKey) {
+      if (!("clipboard" in navigator)) return;
       const td = _getClosestDataCell(target);
       if (td == null) return;
       if (td !== target) return; // Only when td itself is focused

package/src/ui/data/sheet/useSheetColumnFixing.ts

@@ -1,6 +1,12 @@
 import { computed, type Signal } from "@angular/core";
 import type { ISdSheetColumnDef } from "./types";
 
+/**
+ * Fixed column의 left offset을 계산한다.
+ *
+ * **주의:** fixed column의 `width`는 반드시 px 단위여야 정확한 offset이 계산된다.
+ * em, rem, % 등 non-px 단위의 width는 offset 누적에 반영되지 않는다 (0으로 처리).
+ */
 export function useSheetColumnFixing(options: {
   columnDefs: Signal<ISdSheetColumnDef[]>;
 }) {

package/src/ui/form/editor/sd-tiptap-editor.control.ts

@@ -132,7 +132,7 @@ const DEFAULT_EXTENSIONS: AnyExtension[] = [
           <button type="button" data-cmd="clean" (click)="execCmd('clean')">Tx</button>
         </div>
       </div>
-      @if (colorPickerMode !== undefined) {
+      @if (colorPickerMode() !== undefined) {
         <div class="_color-picker">
           @for (color of colorPresets; track color) {
             <button type="button" class="_color-swatch"
@@ -288,11 +288,11 @@ export class SdTiptapEditorControl {
   activeStates: WritableSignal<TiptapActiveStates> = signal(DEFAULT_ACTIVE_STATES);
   activeColor = signal("");
   activeBgColor = signal("");
-  colorPickerMode: "text" | "bg" | undefined;
+  colorPickerMode = signal<"text" | "bg" | undefined>(undefined);
 
   /** @internal -- TipTap Editor 인스턴스. 테스트 및 고급 사용자용 */
   editor: WritableSignal<Editor | undefined> = signal(undefined);
-  private updatingFromEditor = false;
+  private lastEditorHtml: string | undefined;
   private lastExtensions: AnyExtension[] | undefined;
 
   private readonly resolvedExtensions = computed(() => {
@@ -312,9 +312,6 @@ export class SdTiptapEditorControl {
       const extensions = this.resolvedExtensions();
       const val = this.value();
 
-      // Skip if value change originated from editor input
-      if (this.updatingFromEditor) return;
-
       // Recreate editor if extensions changed
       if (this.lastExtensions !== extensions) {
         this.lastExtensions = extensions;
@@ -323,12 +320,16 @@ export class SdTiptapEditorControl {
         return;
       }
 
+      // Skip if value matches last editor output (editor-originated change)
+      if (val === this.lastEditorHtml) return;
+
       // Sync value to existing editor
       const currentEditor = untracked(() => this.editor());
       if (currentEditor == null) return;
       const currentHtml = this.getEditorHtmlFrom(currentEditor);
       if (currentHtml === val) return;
       currentEditor.commands.setContent(val ?? "", { emitUpdate: false });
+      this.lastEditorHtml = undefined;
     });
 
     // disabled/readonly → editor.setEditable()
@@ -374,9 +375,8 @@ export class SdTiptapEditorControl {
       editable: untracked(() => !this.disabled() && !this.readonly()),
       onUpdate: ({ editor }) => {
         const html = this.getEditorHtmlFrom(editor);
-        this.updatingFromEditor = true;
+        this.lastEditorHtml = html;
         this.value.set(html);
-        this.updatingFromEditor = false;
       },
       onTransaction: () => {
         this.refreshActiveStates();
@@ -390,6 +390,7 @@ export class SdTiptapEditorControl {
       ed.destroy();
       this.editor.set(undefined);
     }
+    this.lastEditorHtml = undefined;
   }
 
   private getEditorHtmlFrom(editor: Editor): string | undefined {
@@ -459,7 +460,7 @@ export class SdTiptapEditorControl {
   }
 
   toggleColorPicker(mode: "text" | "bg"): void {
-    this.colorPickerMode = this.colorPickerMode === mode ? undefined : mode;
+    this.colorPickerMode.set(this.colorPickerMode() === mode ? undefined : mode);
   }
 
   applyColor(color: string | undefined): void {
@@ -467,20 +468,21 @@ export class SdTiptapEditorControl {
     if (ed == null) return;
 
     const chain = ed.chain().focus();
-    if (this.colorPickerMode === "text") {
+    const mode = this.colorPickerMode();
+    if (mode === "text") {
       if (color !== undefined) {
         chain.setColor(color).run();
       } else {
         chain.unsetColor().run();
       }
-    } else if (this.colorPickerMode === "bg") {
+    } else if (mode === "bg") {
       if (color !== undefined) {
         chain.setHighlight({ color }).run();
       } else {
         chain.unsetHighlight().run();
       }
     }
-    this.colorPickerMode = undefined;
+    this.colorPickerMode.set(undefined);
   }
 
   private refreshActiveStates(): void {

package/src/ui/form/input/sd-date-range.picker.ts

@@ -84,7 +84,13 @@ export class SdDateRangePicker {
   handleFromDateChanged(): void {
     if (this.periodType() === "월") {
       const fromDate = this.from();
-      this.to.set(fromDate?.setDay(1).addMonths(1).addDays(-1));
+      if (fromDate) {
+        const firstOfMonth = fromDate.setDay(1);
+        this.from.set(firstOfMonth);
+        this.to.set(firstOfMonth.addMonths(1).addDays(-1));
+      } else {
+        this.to.set(undefined);
+      }
     } else if (this.periodType() === "일") {
       this.to.set(this.from());
     } else if (

package/src/ui/form/select/sd-select.control.ts

@@ -10,6 +10,7 @@ import {
   model,
   signal,
   TemplateRef,
+  untracked,
   viewChild,
   ViewEncapsulation,
 } from "@angular/core";
@@ -319,6 +320,8 @@ export class SdSelectControl<M extends "single" | "multi", T> {
     });
 
     // Mirror selected item's contentHTML to the trigger display area
+    // PERF-004: item.value() reads are untracked to reduce signal subscriptions from O(N) to O(K).
+    // _itemControls() already tracks item additions/removals, value() tracks selection changes.
     effect(() => {
       const items = this._itemControls();
       const currentValue = this.value();
@@ -335,14 +338,14 @@ export class SdSelectControl<M extends "single" | "multi", T> {
           return;
         }
 
+        const selectedItems = untracked(() => items.filter((item) => arr.includes(item.value())));
+
         const separator = this.multiSelectionDisplayDirection() === "vertical" ? "<br>" : ", ";
         const htmlParts: string[] = [];
-        for (const item of items) {
-          if (arr.includes(item.value())) {
-            const html = item.contentHTML();
-            if (html !== "") {
-              htmlParts.push(html);
-            }
+        for (const item of selectedItems) {
+          const html = item.contentHTML();
+          if (html !== "") {
+            htmlParts.push(html);
           }
         }
         if (htmlParts.length > 0) {
@@ -353,16 +356,17 @@ export class SdSelectControl<M extends "single" | "multi", T> {
         return;
       }
 
-      for (const item of items) {
-        if (item.value() === currentValue) {
-          const html = item.contentHTML();
-          if (html !== "") {
-            this._selectedItemContentHTML.set(html);
-          }
-          return;
+      const selectedItem = untracked(() => items.find((item) => item.value() === currentValue));
+      if (selectedItem != null) {
+        const html = selectedItem.contentHTML();
+        if (html !== "") {
+          this._selectedItemContentHTML.set(html);
+        } else {
+          this._selectedItemContentHTML.set(undefined);
         }
+      } else {
+        this._selectedItemContentHTML.set(undefined);
       }
-      this._selectedItemContentHTML.set(undefined);
     });
   }