@type-dom/ui 0.6.0 → 0.6.1

package/dist/components/form/td-autocomplete/td-autocomplete.class.js

@@ -1,39 +1,71 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { defineExpose, Div, onBeforeUnmount, onClickOutside, onMounted, TypeFragment, useAttrs as useRawAttrs, } from '@type-dom/framework';
-import { debounce, isArray, throwError } from '@type-dom/utils';
+import { onClickOutside } from '@type-dom/use';
+import { Div, LI, Fragment, useAttrs as useRawAttrs, onBeforeUnmount, onMounted, unref, watch, provide, addEmits, mergeProps, defaultProps, } from '@type-dom/framework';
 import { computed, signal } from '@type-dom/signals';
-// import { useAttrs } from '../../../hooks/use-attrs';
+import { ElLoadingSvg } from '@type-dom/svgs';
+import { debounce, pick } from 'lodash-es';
+import { EVENT_CODE, getEventCode, isArray, throwError } from '@type-dom/utils';
 import { useId } from '../../../hooks/use-id';
-import { CHANGE_EVENT, INPUT_EVENT, UPDATE_MODEL_EVENT, } from '../../../constants/event';
+import { CHANGE_EVENT, INPUT_EVENT, UPDATE_MODEL_EVENT } from '../../../constants/event';
 import { useNamespace } from '../../../hooks/use-namespace';
 import { TdTooltip } from '../../feedback/td-tooltip/td-tooltip.class';
-import { TdInput } from '../td-input/td-input.class';
+import { TdScrollbar } from '../../basic/td-scrollbar/td-scrollbar.class';
+import { TdIcon } from '../../basic/td-icon/td-icon.class';
 import { useFormDisabled } from '../td-form/hooks/use-form-common-props';
-import { autocompleteEmits, autocompleteProps, } from './td-autocomplete.const';
-export class TdAutocomplete extends TypeFragment {
+import { useFormItem } from '../td-form/hooks/use-form-item';
+import { formItemContextKey } from '../td-form/td-form.const';
+import { TdInput } from '../td-input/td-input.class';
+import { inputProps } from '../td-input/td-input.const';
+import { autocompleteEmits, autocompleteProps } from './td-autocomplete.const';
+import './style/index';
+export class TdAutocomplete extends Fragment {
+    highlightedIndex;
+    // activated?: Signal<boolean>;
+    loading;
+    inputRef;
+    popperRef;
+    suggestions;
+    handleSelect;
+    handleKeyEnter;
+    focus;
+    blur;
+    close;
+    highlight;
+    getData;
     constructor(params = {}) {
-        super();
-        this.className = 'TdAutoComplete';
-        this.addEmits(autocompleteEmits);
-        this.assignProps(autocompleteProps);
-        this.props = this.useParams(params);
+        super(params);
+        defaultProps(this, autocompleteProps);
+        addEmits(this, autocompleteEmits);
     }
     setup() {
-        var _a, _b, _c, _d;
         const COMPONENT_NAME = 'TdAutocomplete';
         const props = this.props;
         const emit = this.emit;
-        // const attrs = useAttrs();
+        const passInputProps = computed(() => pick(props, Object.keys(inputProps)));
         const rawAttrs = useRawAttrs();
         const disabled = useFormDisabled();
+        const { formItem: tdFormItem } = useFormItem();
+        // Re-provide the form-item context so nested controls (e.g. the inner
+        // TdInput) can register their id with the surrounding TdFormItem. Without
+        // this the injected context does not reach the input through the Fragment
+        // boundary, leaving the form-item's `label for` unpopulated.
+        if (tdFormItem) {
+            provide(formItemContextKey, tdFormItem);
+        }
+        // Resolve the autocomplete's id synchronously (explicit id wins, otherwise a
+        // generated one) so both the root element and the inner TdInput share the
+        // same id, and the form-item label `for` targets it.
+        const rawId = rawAttrs?.id;
+        const autocompleteId = signal(rawId != null ? String(rawId) : useId().get());
+        onMounted(() => {
+            if (tdFormItem?.addInputId && autocompleteId.get()) {
+                tdFormItem.addInputId(autocompleteId.get());
+            }
+        });
+        onBeforeUnmount(() => {
+            if (tdFormItem?.removeInputId && autocompleteId.get()) {
+                tdFormItem.removeInputId(autocompleteId.get());
+            }
+        });
         const ns = useNamespace('autocomplete');
         const inputRef = signal();
         const regionRef = signal();
@@ -47,13 +79,21 @@ export class TdAutocomplete extends TypeFragment {
         const activated = signal(false);
         const suggestionDisabled = signal(false);
         const loading = signal(false);
+        // Keep the highlighted item in sync with `highlightFirstItem` while the
+        // suggestion dropdown is already open. This mirrors the behaviour triggered
+        // by focusing the input, which happy-dom suppresses when the element is
+        // already focused (so a re-focus in tests would otherwise not re-highlight).
+        watch(() => unref(props.highlightFirstItem), (val) => {
+            if (activated.get() && suggestions.get().length > 0) {
+                highlightedIndex.set(val ? 0 : -1);
+            }
+        });
         const listboxId = useId();
-        const styles = computed(() => rawAttrs === null || rawAttrs === void 0 ? void 0 : rawAttrs.style);
+        const styles = computed(() => rawAttrs?.style);
         const suggestionVisible = computed(() => {
             const isValidData = suggestions.get().length > 0;
             return (isValidData || loading.get()) && activated.get();
         });
-        const suggestionLoading = computed(() => !props.hideLoading && loading.get());
         const refInput = computed(() => {
             if (inputRef.get()) {
                 return Array.from(inputRef.get().dom.querySelectorAll('input'));
@@ -68,8 +108,7 @@ export class TdAutocomplete extends TypeFragment {
         const onHide = () => {
             highlightedIndex.set(-1);
         };
-        const getData = (queryString) => __awaiter(this, void 0, void 0, function* () {
-            var _a;
+        const getData = async (queryString) => {
             if (suggestionDisabled.get())
                 return;
             const cb = (suggestionList) => {
@@ -78,7 +117,7 @@ export class TdAutocomplete extends TypeFragment {
                     return;
                 if (isArray(suggestionList)) {
                     suggestions.set(suggestionList);
-                    highlightedIndex.set(props.highlightFirstItem ? 0 : -1);
+                    highlightedIndex.set(unref(props.highlightFirstItem) ? 0 : -1);
                 }
                 else {
                     throwError(COMPONENT_NAME, 'autocomplete suggestions must be an array');
@@ -89,17 +128,33 @@ export class TdAutocomplete extends TypeFragment {
                 cb(props.fetchSuggestions);
             }
             else {
-                const result = yield ((_a = props.fetchSuggestions) === null || _a === void 0 ? void 0 : _a.call(props, queryString, cb));
+                const result = await props.fetchSuggestions?.(queryString, cb);
                 if (isArray(result))
                     cb(result);
             }
-        });
-        const debouncedGetData = debounce(getData, props.debounce);
+        };
+        // vueuse's useDebounceFn invokes immediately when delay <= 0, so a debounce
+        // of 0 must call getData synchronously instead of collapsing into a single
+        // trailing invocation (which would break the `triggerOnEnter` assertion).
+        let debouncedGetDataFn = null;
+        let lastDebounce = -1;
+        const debouncedGetData = (queryString) => {
+            const wait = unref(props.debounce);
+            if (wait <= 0) {
+                getData(queryString);
+                return;
+            }
+            if (!debouncedGetDataFn || lastDebounce !== wait) {
+                debouncedGetDataFn = debounce(getData, wait);
+                lastDebounce = wait;
+            }
+            debouncedGetDataFn(queryString);
+        };
         const handleInput = (value) => {
             const valuePresented = !!value;
             emit(INPUT_EVENT, value);
             emit(UPDATE_MODEL_EVENT, value);
-            // suggestionDisabled.set(false)
+            suggestionDisabled.set(false);
             // activated.value ||= valuePresented
             if (!activated.get()) {
                 activated.set(valuePresented);
@@ -112,10 +167,9 @@ export class TdAutocomplete extends TypeFragment {
             debouncedGetData(value);
         };
         const handleMouseDown = (event) => {
-            var _a;
             if (disabled.get())
                 return;
-            if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.tagName) !== 'INPUT' ||
+            if (event?.target?.tagName !== 'INPUT' ||
                 refInput.get().includes(document.activeElement)) {
                 activated.set(true);
             }
@@ -127,8 +181,9 @@ export class TdAutocomplete extends TypeFragment {
             if (!ignoreFocusEvent) {
                 activated.set(true);
                 emit('focus', evt);
-                if (props.triggerOnFocus && !readonly) {
-                    debouncedGetData(String(props.modelValue));
+                const queryString = props.modelValue ?? '';
+                if (unref(props.triggerOnFocus) && !readonly) {
+                    debouncedGetData(String(queryString));
                 }
             }
             else {
@@ -137,10 +192,9 @@ export class TdAutocomplete extends TypeFragment {
         };
         const handleBlur = (evt) => {
             setTimeout(() => {
-                var _a, _b;
                 // validate current focus event is inside el-tooltip-content
                 // if so, ignore the blur event and the preview focus event
-                if ((_b = (_a = popperRef.get()) === null || _a === void 0 ? void 0 : _a.isFocusInsideContent) === null || _b === void 0 ? void 0 : _b.call(_a)) {
+                if (popperRef.get()?.isFocusInsideContent?.()) {
                     ignoreFocusEvent = true;
                     return;
                 }
@@ -154,22 +208,26 @@ export class TdAutocomplete extends TypeFragment {
             emit(UPDATE_MODEL_EVENT, '');
             emit('clear');
         };
-        const handleKeyEnter = () => __awaiter(this, void 0, void 0, function* () {
+        const handleKeyEnter = async () => {
             if (suggestionVisible.get() &&
                 highlightedIndex.get() >= 0 &&
                 highlightedIndex.get() < suggestions.get().length) {
                 handleSelect(suggestions.get()[highlightedIndex.get()]);
             }
-            else if (props.selectWhenUnmatched) {
-                emit('select', { value: props.modelValue });
-                suggestions.set([]);
-                highlightedIndex.set(-1);
+            else {
+                if (props.selectWhenUnmatched) {
+                    emit('select', { value: props.vModel?.get() });
+                    suggestions.set([]);
+                    highlightedIndex.set(-1);
+                }
+                activated.set(true);
+                debouncedGetData(String(props.vModel?.get() ?? ''));
             }
-        });
+        };
         const handleKeyEscape = (evt) => {
             if (suggestionVisible.get()) {
-                evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                evt?.preventDefault();
+                evt?.stopPropagation();
                 close();
             }
         };
@@ -177,33 +235,29 @@ export class TdAutocomplete extends TypeFragment {
             activated.set(false);
         };
         const focus = () => {
-            var _a, _b;
-            (_b = (_a = inputRef.get()) === null || _a === void 0 ? void 0 : _a.dom) === null || _b === void 0 ? void 0 : _b.focus();
+            inputRef.get()?.focus?.();
         };
         const blur = () => {
-            var _a, _b;
-            (_b = (_a = inputRef.get()) === null || _a === void 0 ? void 0 : _a.dom) === null || _b === void 0 ? void 0 : _b.blur();
+            inputRef.get()?.blur?.();
         };
-        const handleSelect = (item) => __awaiter(this, void 0, void 0, function* () {
-            emit(INPUT_EVENT, item[props.valueKey]);
-            emit(UPDATE_MODEL_EVENT, item[props.valueKey]);
+        const handleSelect = async (item) => {
+            emit(INPUT_EVENT, item[unref(props.valueKey)]);
+            emit(UPDATE_MODEL_EVENT, item[unref(props.valueKey)]);
             emit('select', item);
             suggestions.set([]);
             highlightedIndex.set(-1);
-        });
+        };
         const highlight = (index) => {
             if (!suggestionVisible.get() || loading.get())
                 return;
             if (index < 0) {
-                highlightedIndex.set(-1);
+                highlightedIndex.set(unref(props.loopNavigation) ? suggestions.get().length - 1 : -1);
                 return;
             }
             if (index >= suggestions.get().length) {
-                index = suggestions.get().length - 1;
+                index = unref(props.loopNavigation) ? 0 : suggestions.get().length - 1;
             }
-            const suggestion = regionRef
-                .get()
-                .querySelector(`.${ns.be('suggestion', 'wrap')}`);
+            const suggestion = regionRef.get().querySelector(`.${ns.be('suggestion', 'wrap')}`);
             const suggestionList = suggestion.querySelectorAll(`.${ns.be('suggestion', 'list')} li`);
             const highlightItem = suggestionList[index];
             const scrollTop = suggestion.scrollTop;
@@ -216,142 +270,167 @@ export class TdAutocomplete extends TypeFragment {
             }
             highlightedIndex.set(index);
             // TODO: use Volar generate dts to fix it.
-            inputRef.get().ref.setAttribute('aria-activedescendant', `${listboxId.get()}-item-${highlightedIndex.get()}`);
+            unref(inputRef.get()?.ref)?.setAttribute('aria-activedescendant', `${listboxId.get()}-item-${highlightedIndex.get()}`);
         };
         const stopHandle = onClickOutside(listboxRef, () => {
+            // Prevent closing if focus is inside popper content
+            if (popperRef.get()?.isFocusInsideContent?.())
+                return;
             if (suggestionVisible.get())
                 close();
         });
+        const handleKeydown = (e) => {
+            const code = getEventCode(e);
+            switch (code) {
+                case EVENT_CODE.up:
+                    e.preventDefault();
+                    highlight(highlightedIndex.get() - 1);
+                    break;
+                case EVENT_CODE.down:
+                    e.preventDefault();
+                    highlight(highlightedIndex.get() + 1);
+                    break;
+                case EVENT_CODE.enter:
+                case EVENT_CODE.numpadEnter:
+                    e.preventDefault();
+                    handleKeyEnter();
+                    break;
+                case EVENT_CODE.tab:
+                    close();
+                    break;
+                case EVENT_CODE.esc:
+                    handleKeyEscape(e);
+                    break;
+                case EVENT_CODE.home:
+                    e.preventDefault();
+                    highlight(0);
+                    break;
+                case EVENT_CODE.end:
+                    e.preventDefault();
+                    highlight(suggestions.get().length - 1);
+                    break;
+                case EVENT_CODE.pageUp:
+                    e.preventDefault();
+                    highlight(Math.max(0, highlightedIndex.get() - 10));
+                    break;
+                case EVENT_CODE.pageDown:
+                    e.preventDefault();
+                    highlight(Math.min(suggestions.get().length - 1, highlightedIndex.get() + 10));
+                    break;
+            }
+        };
         onBeforeUnmount(() => {
-            stopHandle === null || stopHandle === void 0 ? void 0 : stopHandle();
+            stopHandle?.();
         });
         onMounted(() => {
             // TODO: use Volar generate dts to fix it.
-            inputRef.get().ref.setAttribute('role', 'textbox');
-            inputRef.get().ref.setAttribute('aria-autocomplete', 'list');
-            inputRef.get().ref.setAttribute('aria-controls', 'id');
-            inputRef.get().ref.setAttribute('aria-activedescendant', `${listboxId.get()}-item-${highlightedIndex.get()}`);
+            unref(inputRef.get()?.ref)?.setAttribute('role', 'textbox');
+            unref(inputRef.get()?.ref)?.setAttribute('aria-autocomplete', 'list');
+            unref(inputRef.get()?.ref)?.setAttribute('aria-controls', listboxId.get());
+            unref(inputRef.get()?.ref)?.setAttribute('aria-activedescendant', `${listboxId.get()}-item-${highlightedIndex.get()}`);
             // get readonly attr
-            readonly = inputRef.get().ref.hasAttribute('readonly');
-        });
-        defineExpose({
-            /** @description the index of the currently highlighted item */
-            highlightedIndex,
-            /** @description autocomplete whether activated */
-            activated,
-            /** @description remote search loading status */
-            loading,
-            /** @description el-input component instance */
-            inputRef,
-            /** @description el-tooltip component instance */
-            popperRef,
-            /** @description fetch suggestions result */
-            suggestions,
-            /** @description triggers when a suggestion is clicked */
-            handleSelect,
-            /** @description handle keyboard enter event */
-            handleKeyEnter,
-            /** @description focus the input element */
-            focus,
-            /** @description blur the input element */
-            blur,
-            /** @description close suggestion */
-            close,
-            /** @description highlight an item in a suggestion */
-            highlight,
-            /** @description loading suggestion list */
-            getData,
+            readonly = unref(inputRef.get()?.ref)?.hasAttribute('readonly');
         });
-        this.addChild(new TdTooltip({
-            refEl: popperRef,
-            visible: suggestionVisible,
-            placement: props.placement,
-            fallbackPlacements: ['bottom-start', 'top-start'],
-            popperClass: [ns.e('popper'), props.popperClass],
-            teleported: props.teleported,
-            gpuAcceleration: false,
-            pure: true,
-            // manualMode: true, // todo 手动模式
-            effect: 'light',
-            trigger: 'click',
-            transition: `${ns.namespace.get()}-zoom-in-top`,
-            persistent: true,
+        /** @description the index of the currently highlighted item */
+        this.highlightedIndex = highlightedIndex;
+        /** @description autocomplete whether activated */
+        // this.activated = activated;
+        /** @description remote search loading status */
+        this.loading = loading;
+        /** @description el-input component instance */
+        this.inputRef = inputRef;
+        /** @description el-tooltip component instance */
+        this.popperRef = popperRef;
+        /** @description fetch suggestions result */
+        this.suggestions = suggestions;
+        /** @description triggers when a suggestion is clicked */
+        this.handleSelect = handleSelect;
+        /** @description handle keyboard enter event */
+        this.handleKeyEnter = handleKeyEnter;
+        /** @description focus the input element */
+        this.focus = focus;
+        /** @description blur the input element */
+        this.blur = blur;
+        /** @description close suggestion */
+        this.close = close;
+        /** @description highlight an item in a suggestion */
+        this.highlight = highlight;
+        /** @description loading suggestion list */
+        this.getData = getData;
+        // todo inputProps passInputProps 相互调用了？
+        const tdInputProps = mergeProps(passInputProps.get(), props);
+        this.addChild(new Div({
+            class: ns.b(),
+            // The id lives on the autocomplete root element (mirroring element-plus'
+            // `<div class="el-autocomplete">`) so the `data-test-ref` and the
+            // form-item label `for` target the same node. The ARIA combobox roles
+            // also belong on this root in element-plus.
             attrObj: {
-                role: 'listbox',
-            },
-            emits: {
-                beforeShow: onSuggestionShow,
-                hide: onHide,
+                role: 'combobox',
+                ariaHaspopup: 'listbox',
+                ariaExpanded: suggestionVisible,
+                ariaOwns: listboxId,
             },
-            slot: new Div({
-                refDom: listboxRef,
-                // todo attrs
-                class: [ns.b() /*, attrs.class*/],
-                styleObj: styles,
-                attrObj: {
-                    role: 'combobox',
-                    ariaHaspopup: 'listbox',
-                    ariaExpanded: suggestionVisible.get(),
-                    ariaOwns: 'listboxId',
-                },
-                slot: new TdInput({
-                    refEl: inputRef,
-                    // v-bind: attrs"
-                    clearable: props.clearable,
-                    disabled: disabled,
-                    // name: name as string,
-                    modelValue: props.modelValue,
-                    attrObj: {
-                        ariaLabel: 'ariaLabel',
-                    },
-                    emits: {
-                        input: (evt) => {
-                            // todo
-                            handleInput((evt === null || evt === void 0 ? void 0 : evt.target).value);
-                        },
-                        change: (evt) => {
-                            // todo
-                            handleChange((evt === null || evt === void 0 ? void 0 : evt.target).value);
-                        },
-                        focus: handleFocus,
-                        blur: handleBlur,
-                        clear: handleClear,
-                        keydown: (evt) => {
-                            // .up.prevent
-                            if ((evt === null || evt === void 0 ? void 0 : evt.code) === 'up') {
-                                highlight(highlightedIndex.get() - 1);
-                                evt.preventDefault();
-                            }
-                            else if ((evt === null || evt === void 0 ? void 0 : evt.code) === 'down') {
-                                highlight(highlightedIndex.get() + 1);
-                                evt.preventDefault();
-                            }
-                            else if ((evt === null || evt === void 0 ? void 0 : evt.code) === 'enter') {
-                                handleKeyEnter();
-                            }
-                            else if ((evt === null || evt === void 0 ? void 0 : evt.code) === 'tab') {
-                                close();
-                            }
-                            else if ((evt === null || evt === void 0 ? void 0 : evt.code) === 'esc') {
-                                handleKeyEscape(evt);
-                            }
+            slot: new TdTooltip({
+                refEl: popperRef,
+                visible: suggestionVisible,
+                placement: props.placement,
+                fallbackPlacements: ['bottom-start', 'top-start'],
+                popperClass: [ns.e('popper'), props.popperClass],
+                popperStyle: props.popperStyle,
+                teleported: props.teleported,
+                appendTo: props.appendTo,
+                gpuAcceleration: false,
+                pure: true,
+                effect: 'light',
+                trigger: 'click',
+                transition: `${ns.namespace.get()}-zoom-in-top`,
+                persistent: true,
+                role: 'listbox',
+                onBeforeShow: onSuggestionShow,
+                onHide: onHide,
+                slot: new Div({
+                    refDom: listboxRef,
+                    // todo attrs
+                    class: [props.class /*, attrs.class*/],
+                    styleObj: styles,
+                    slot: new TdInput({
+                        refEl: inputRef,
+                        // v-bind="mergeProps(passInputProps, $attrs)"
+                        ...tdInputProps,
+                        // forward an explicit id so the inner input registers it with the
+                        // form-item instead of generating a different one
+                        ...(autocompleteId ? { id: autocompleteId } : {}),
+                        // attrObj: tdInputProps as ToMaybeRefs<InputHTMLAttributes>,
+                        clearable: props.clearable,
+                        ariaLabel: props.ariaLabel,
+                        name: props.name,
+                        // placeholder: props.attrObj?.placeholder,
+                        vModel: props.vModel,
+                        modelValue: props.modelValue,
+                        disabled: disabled,
+                        onInput: handleInput,
+                        onChange: handleChange,
+                        onFocus: handleFocus,
+                        onBlur: handleBlur,
+                        onClear: handleClear,
+                        onKeydown: handleKeydown,
+                        onMousedown: handleMouseDown,
+                        slots: {
+                            prepend: props.slots?.prepend,
+                            append: props.slots?.append,
+                            prefix: props.slots?.prefix,
+                            suffix: props.slots?.suffix,
                         },
-                        mousedown: handleMouseDown,
-                    },
-                    slots: {
-                        prepend: (_a = props.slots) === null || _a === void 0 ? void 0 : _a.prepend,
-                        append: (_b = props.slots) === null || _b === void 0 ? void 0 : _b.append,
-                        prefix: (_c = props.slots) === null || _c === void 0 ? void 0 : _c.prefix,
-                        suffix: (_d = props.slots) === null || _d === void 0 ? void 0 : _d.suffix,
-                    },
+                    }),
                 }),
                 slots: {
                     content: new Div({
                         refDom: regionRef,
-                        class: [
+                        class: computed(() => [
                             ns.b('suggestion'),
-                            ns.is('loading', suggestionLoading.get()),
-                        ],
+                            ns.is('loading', !unref(props.hideLoading) && loading.get()),
+                        ]),
                         styleObj: {
                             [props.fitInputWidth ? 'width' : 'minWidth']: dropdownWidth,
                             outline: 'none',
@@ -359,6 +438,61 @@ export class TdAutocomplete extends TypeFragment {
                         attrObj: {
                             role: 'region',
                         },
+                        slot: [
+                            new Div({
+                                vIf: this.props.slots?.header,
+                                class: ns.be('suggestion', 'header'),
+                                onClick: (evt) => {
+                                    evt?.stopPropagation();
+                                },
+                                slot: this.props.slots?.header,
+                            }),
+                            // 加载图标作为 suggestion 容器的响应式子节点（vIf），
+                            // 而非放在 TdScrollbar 的函数 slot 内：弹层挂载（suggestionVisible
+                            // 因 loading 变 true 而点亮）时本节点随容器一并 mount，loading 已为
+                            // true，故图标必定渲染；避免函数 slot 重渲染与弹层挂载的竞态导致
+                            // 图标漏挂载（bug #2 的修复点）。
+                            new LI({
+                                vIf: computed(() => !unref(props.hideLoading) && loading.get()),
+                                class: ns.be('suggestion', 'loading'),
+                                slot: props.slots?.loading ??
+                                    new TdIcon({
+                                        class: ns.is('loading'),
+                                        slot: new ElLoadingSvg(),
+                                    }),
+                            }),
+                            new TdScrollbar({
+                                tag: 'ul',
+                                wrapClass: ns.be('suggestion', 'wrap'),
+                                viewClass: ns.be('suggestion', 'list'),
+                                attrObj: {
+                                    id: listboxId,
+                                    role: 'listbox',
+                                },
+                                slot: () => {
+                                    if (!suggestions.get().length)
+                                        return [];
+                                    return suggestions.get().map((item, index) => {
+                                        return new LI({
+                                            class: { highlighted: highlightedIndex.get() === index },
+                                            attrObj: {
+                                                id: `${listboxId.get()}-item-${index}`,
+                                                role: 'option',
+                                                ariaSelected: highlightedIndex.get() === index,
+                                            },
+                                            onClick: () => handleSelect(item),
+                                            slot: item[unref(props.valueKey)],
+                                        });
+                                    });
+                                },
+                            }),
+                            new Div({
+                                vIf: this.props.slots?.footer,
+                                class: ns.be('suggestion', 'footer'),
+                                onClick: (evt) => evt?.stopPropagation(),
+                                slot: this.props.slots?.footer,
+                            }),
+                        ],
                     }),
                 },
             }),