@type-dom/ui 0.6.0 → 0.6.1

package/dist/components/form/td-select/useSelect.js

@@ -1,103 +1,12 @@
-import { signal, computed, watch, effect, unref } from '@type-dom/signals';
-import { nextTick, onMounted, useResizeObserver } from '@type-dom/framework';
-import { findLastIndex, get, isEqual, debounce as lodashDebounce } from 'lodash';
-import { isClient, isIOS, debugWarn, ensureArray, isArray, isFunction, isNumber, isObject, isPlainObject, isUndefined, scrollIntoView } from '@type-dom/utils';
-import { ValidateComponentsMap } from '@type-dom/svgs';
+import { clamp, findLastIndex, get, isEqual, debounce as lodashDebounce } from 'lodash-es';
+import { signal, computed, effect } from '@type-dom/signals';
+import { useResizeObserver } from '@type-dom/use';
+import { nextTick, onMounted, watch, unref, } from '@type-dom/framework';
+import { isClient, isIOS, debugWarn, ensureArray, isArray, isFunction, isNumber, isObject, isPlainObject, isUndefined, isEmpty, scrollIntoView, } from '@type-dom/utils';
 import { CHANGE_EVENT, EVENT_CODE, UPDATE_MODEL_EVENT, } from '../../../constants';
 import { useComposition, useEmptyValues, useFocusController, useId, useLocale, useNamespace, } from '../../../hooks';
+import { ValidateComponentsMap } from '../../../utils/icon';
 import { useFormItem, useFormItemInputId, useFormSize } from '../td-form';
-// import { CheckboxValueType } from '../td-checkbox/td-checkbox.interface';
-// import type { ISelectProps, SelectOptionProxy } from './token';
-// type useSelectType = (
-//   props: TdSelectProps,
-//   emit: any
-// ) => {
-//   inputId: Ref<string | undefined>;
-//   contentId: Ref<string | undefined>;
-//   nsSelect: UseNamespaceReturn;
-//   nsInput: UseNamespaceReturn;
-//   states: Record<string, any>;
-//   isFocused: Ref<boolean>;
-//   expanded: Ref<boolean>;
-//   optionsArray: Computed<any[]>;
-//   hoverOption: Ref<unknown>;
-//   selectSize: Computed<'' | 'default' | 'small' | 'large'>;
-//   filteredOptionsCount: Computed<number>;
-//   resetCalculatorWidth: () => void;
-//   updateTooltip: () => void;
-//   updateTagTooltip: () => void;
-//   debouncedOnInputChange: () => void; // DebouncedFunc<() => void>;
-//   onInput: (event?: Event) => void;
-//   deletePrevTag: (event?: Event) => void;
-//   deleteTag: (event?: Event, tag?: any) => void;
-//   deleteSelected: (event?: Event) => void;
-//   handleOptionSelect: (option: any) => void;
-//   scrollToOption: (option: any) => void;
-//   hasModelValue: Computed<boolean>;
-//   shouldShowPlaceholder: Computed<boolean>;
-//   currentPlaceholder: Computed<string>;
-//   mouseEnterEventName: Ref<string | null>;
-//   needStatusIcon: Computed<boolean>;
-//   showClose: Computed<boolean>;
-//   iconComponent: Computed<string>;
-//   iconReverse: Computed<boolean>;
-//   validateState: Computed<string>;
-//   popupScroll: (data: { scrollTop: number; scrollLeft: number }) => void;
-//
-//   validateIcon: Computed<unknown>;
-//   showNewOption: Computed<boolean>;
-//   updateOptions: () => void;
-//   collapseTagSize: Computed<'default' | 'small'>;
-//   setSelected: () => void;
-//   selectDisabled: Computed<boolean>;
-//   emptyText: Computed<string | null>;
-//   handleCompositionStart: (e?: Event) => void;
-//   handleCompositionUpdate: (e?: Event) => void;
-//   handleCompositionEnd: (e?: Event) => void;
-//   onOptionCreate: (vm: TdOption) => void;
-//   onOptionDestroy: (key: any, vm: TdOption) => void;
-//   handleMenuEnter: () => void;
-//   focus: () => void;
-//   blur: () => void;
-//   handleClearClick: (event?: Event) => void;
-//   handleClickOutside: (event?: Event) => void;
-//   handleEsc: () => void;
-//   toggleMenu: () => void;
-//   selectOption: () => void;
-//   getValueKey: (item: any) => any;
-//   navigateOptions: (direction: string) => void;
-//   dropdownMenuVisible: Computed<boolean>;
-//   showTagList: Computed<unknown[]>;
-//   collapseTagList: Computed<unknown[]>;
-//   tagStyle: Computed<unknown>;
-//   collapseTagStyle: Computed<IStyle>;
-//   inputStyle: Computed<unknown>;
-//   popperRef: Computed<unknown>;
-//   inputRef: Ref<HTMLInputElement | undefined>;
-//   tooltipRef: Ref<TdTooltip | undefined>;
-//   tagTooltipRef: Ref<TdTooltip | undefined>;
-//   calculatorRef: Ref<HTMLElement>;
-//   prefixRef: Ref<HTMLElement>;
-//   suffixRef: Ref<HTMLElement>;
-//   selectRef: Ref<HTMLElement>;
-//   wrapperRef: Ref<HTMLElement>;
-//   selectionRef: Ref<HTMLElement>;
-//   scrollbarRef: Ref<
-//     | {
-//         handleScroll: () => void;
-//       }
-//     | undefined
-//   >;
-//   menuRef: Ref<HTMLElement>;
-//   tagMenuRef: Ref<HTMLElement>;
-//   collapseItemRef: Ref<HTMLElement>;
-// };
-//
-// interface ISelectedOption {
-//   value: unknown;
-//   currentLabel: unknown;
-//   isDisabled?: MaybeRef<boolean>;
-// }
 export const useSelect = (props, emit) => {
     const { t } = useLocale();
     const contentId = useId();
@@ -107,17 +16,33 @@ export const useSelect = (props, emit) => {
         inputValue: signal(''),
         options: signal(new Map()),
         cachedOptions: new Map(),
-        optionValues: [], // sorted value of options
-        selected: [],
-        selectionWidth: 0,
-        collapseItemWidth: 0,
+        optionValues: signal([]), // sorted value of options
+        selected: signal([]),
+        // Signals (not plain numbers) so external callers — notably the collapse-tags
+        // tests — can drive them via `.set()` and have `collapseTagStyle` recompute.
+        selectionWidth: signal(0),
+        collapseItemWidth: signal(0),
+        // `selectedLabel` is assigned a computed after `states` is declared (see below).
         selectedLabel: signal(''),
         hoveringIndex: -1,
         previousQuery: null,
-        inputHovering: false,
+        inputHovering: signal(false),
         menuVisibleOnFocus: false,
         isBeforeHide: false,
     };
+    // `selectedLabel` is a computed derived from the selected option(s), so it
+    // stays in sync when an option's label changes or the selection changes.
+    const selectedLabel = computed(() => {
+        const selected = states.selected.get();
+        if (!selected.length) {
+            return unref(props.multiple) ? [] : '';
+        }
+        if (unref(props.multiple)) {
+            return selected.map((o) => unref(o.currentLabel));
+        }
+        return unref(selected[0].currentLabel) ?? '';
+    });
+    states.selectedLabel = selectedLabel;
     // template refs
     const selectRef = signal(undefined);
     const selectionRef = signal(undefined);
@@ -135,33 +60,37 @@ export const useSelect = (props, emit) => {
     });
     const { wrapperRef, isFocused, handleBlur } = useFocusController(inputRef, {
         beforeFocus() {
-            return unref(selectDisabled);
+            return selectDisabled.get();
         },
-        afterFocus() {
-            if (unref(props.automaticDropdown) && !expanded.get()) {
+        afterFocus(event) {
+            if (props.automaticDropdown?.get() && !expanded.get()) {
                 expanded.set(true);
                 states.menuVisibleOnFocus = true;
             }
         },
         beforeBlur(event) {
-            var _a, _b, _c, _d;
-            return (((_b = (_a = tooltipRef === null || tooltipRef === void 0 ? void 0 : tooltipRef.get()) === null || _a === void 0 ? void 0 : _a.isFocusInsideContent) === null || _b === void 0 ? void 0 : _b.call(_a, event)) ||
-                ((_d = (_c = tagTooltipRef === null || tagTooltipRef === void 0 ? void 0 : tagTooltipRef.get()) === null || _c === void 0 ? void 0 : _c.isFocusInsideContent) === null || _d === void 0 ? void 0 : _d.call(_c, event)));
+            return (tooltipRef?.get()?.isFocusInsideContent?.(event) ||
+                tagTooltipRef?.get()?.isFocusInsideContent?.(event));
         },
-        afterBlur() {
+        afterBlur(event) {
             expanded.set(false);
             states.menuVisibleOnFocus = false;
+            // Mirrors element-plus: trigger form-item validation on blur.
+            if (unref(props.validateEvent)) {
+                formItem?.validate('blur').catch((err) => debugWarn(err));
+            }
         },
     });
     // the controller of the expanded popup
     const expanded = signal(false);
+    const debouncing = signal(false);
     const hoverOption = signal();
     const { form, formItem } = useFormItem();
     const { inputId } = useFormItemInputId(props, {
         formItemContext: formItem,
     });
     const { valueOnClear, isEmptyValue } = useEmptyValues(props);
-    const selectDisabled = computed(() => unref(props.disabled) || unref(form === null || form === void 0 ? void 0 : form.disabled));
+    const selectDisabled = computed(() => unref(props.disabled?.get()) || unref(form?.disabled));
     const hasModelValue = computed(() => {
         // console.warn('hasModelValue computed . ');
         const modelValue = unref(props.modelValue);
@@ -169,21 +98,26 @@ export const useSelect = (props, emit) => {
             ? modelValue.length > 0
             : !isEmptyValue(modelValue);
     });
-    const needStatusIcon = computed(() => { var _a; return (_a = form === null || form === void 0 ? void 0 : form.statusIcon) !== null && _a !== void 0 ? _a : false; });
+    const needStatusIcon = computed(() => form?.statusIcon ?? false);
     const showClose = computed(() => {
-        return (unref(props.clearable) &&
+        return (props.clearable?.get() &&
             !selectDisabled.get() &&
-            states.inputHovering &&
+            (states.inputHovering.get() || isFocused.get()) &&
             hasModelValue.get());
     });
     const iconComponent = computed(() => unref(props.remote) && unref(props.filterable) && !unref(props.remoteShowSuffix)
         ? ''
         : unref(props.suffixIcon));
     const iconReverse = computed(() => nsSelect.is('reverse', iconComponent.get() && expanded.get()));
-    const validateState = computed(() => (formItem === null || formItem === void 0 ? void 0 : formItem.validateState) || '');
+    const validateState = computed(() => formItem?.validateState.get() || '');
     const validateIcon = computed(() => ValidateComponentsMap[validateState.get()]);
-    const debounce = computed(() => (unref(props.remote) ? 300 : 0));
-    const isRemoteSearchEmpty = computed(() => unref(props.remote) && !states.inputValue.get() && states.options.get().size === 0);
+    const debounce = computed(() => unref(props.remote) ? (unref(props.debounce) ?? 300) : 0);
+    const isRemoteSearchEmpty = computed(() => unref(props.remote) &&
+        // Mirrors element-plus: a remote search counts as "empty" only when the user
+        // has NOT typed a query yet and there are no options, so the dropdown stays
+        // hidden until results arrive.
+        !states.inputValue.get() &&
+        states.options.get().size === 0);
     const emptyText = computed(() => {
         if (unref(props.loading)) {
             return unref(props.loadingText) || t('el.select.loading');
@@ -201,11 +135,26 @@ export const useSelect = (props, emit) => {
         }
         return undefined;
     });
-    const filteredOptionsCount = computed(() => optionsArray.get().filter((option) => option.visible).length);
+    const filteredOptionsCount = computed(() => {
+        const arr = optionsArray.get();
+        const visibleOptions = arr.filter((option) => {
+            const visible = option.visible?.get() !== false;
+            return visible;
+        });
+        return visibleOptions.length;
+    });
     const optionsArray = computed(() => {
-        const list = Array.from(states.options.get().values());
+        // Exclude options hidden by v-if (e.g. the always-present "create new option"
+        // placeholder whose value is the live inputValue signal). This keeps the
+        // phantom option out of selection/navigation while still including it once
+        // its v-if flips to true (the computed tracks props.vIf). Options without a
+        // v-if prop at all are always included.
+        const list = Array.from(states.options.get().values()).filter((option) => {
+            const vIf = option.props?.vIf;
+            return vIf === undefined || unref(vIf);
+        });
         const newList = [];
-        states.optionValues.forEach((item) => {
+        states.optionValues.get().forEach((item) => {
             const index = list.findIndex((i) => i.props.value === item.value); // todo  .props.value === item.value edit by me
             if (index > -1) {
                 newList.push(list[index]);
@@ -213,45 +162,46 @@ export const useSelect = (props, emit) => {
         });
         return newList.length >= list.length ? newList : list;
     });
-    const cachedOptionsArray = computed(() => Array.from(states.cachedOptions.values()));
     const showNewOption = computed(() => {
-        var _a;
-        // console.warn('showNewOption . optionsArray and states.inputValue is ', optionsArray,  states.inputValue);
-        const hasExistingOption = (_a = optionsArray.get()) === null || _a === void 0 ? void 0 : _a.filter((option) => {
-            // console.warn('showNewOption . option.props.created is ', option.props.created);
-            return !option.props.created;
-        }).some((option) => {
-            var _a;
-            return ((_a = option.currentLabel) === null || _a === void 0 ? void 0 : _a.get()) === states.inputValue.get();
+        // IMPORTANT: read `states.options` (a plain signal) directly here, NOT
+        // `optionsArray`. `optionsArray` filters each option by `unref(option.props.vIf)`,
+        // and the `allowCreate` option's `vIf` is THIS `showNewOption` computed — so reading
+        // `optionsArray` from inside `showNewOption` would re-enter `showNewOption`
+        // (infinite synchronous recursion) the moment the allowCreate option is registered
+        // into `states.options`. Reading the signal directly breaks the cycle; we simply
+        // skip created options manually (mirroring element-plus's `options` flattening, which
+        // excludes the synthetic "create new" option).
+        const hasExistingOption = Array.from(states.options.get().values()).some((option) => {
+            return !option.props.isCreated && option.currentLabel?.get() === states.inputValue.get();
         });
-        // console.warn('showNewOption . hasExistingOption is ', hasExistingOption);
         return (unref(props.filterable) &&
             unref(props.allowCreate) &&
             states.inputValue.get() !== '' &&
             !hasExistingOption);
     });
     const updateOptions = () => {
-        var _a;
         if (unref(props.filterable) && isFunction(props.filterMethod))
             return;
         if (unref(props.filterable) &&
             unref(props.remote) &&
             isFunction(unref(props.remoteMethod)))
             return;
-        (_a = optionsArray.get()) === null || _a === void 0 ? void 0 : _a.forEach((option) => {
-            var _a;
-            (_a = option.updateOption) === null || _a === void 0 ? void 0 : _a.call(option, states.inputValue.get());
+        optionsArray.get()?.forEach((option) => {
+            option.updateOption?.(states.inputValue.get());
         });
     };
-    const selectSize = useFormSize();
+    const selectSize = useFormSize(props.size);
     const collapseTagSize = computed(() => ['small'].includes(selectSize.get()) ? 'small' : 'default');
     const dropdownMenuVisible = computed(() => {
-        // console.warn('dropdownMenuVisible . expanded.get() is ',
-        //   expanded.get() && !isRemoteSearchEmpty.get(),
-        //   ' and !isRemoteSearchEmpty.get() is ', !isRemoteSearchEmpty.get());
-        return expanded.get() && !isRemoteSearchEmpty.get();
+        const visible = expanded.get() &&
+            (unref(props.loading) ||
+                !isRemoteSearchEmpty.get() ||
+                (unref(props.remote) && !!(unref(props.slots)?.empty))) &&
+            (!debouncing.get() ||
+                !isEmpty(states.previousQuery) ||
+                states.options.get().size > 0);
+        return visible;
     }, (val) => {
-        // console.warn('dropdownMenuVisible , val is ', val);
         expanded.set(val);
     });
     const shouldShowPlaceholder = computed(() => {
@@ -265,10 +215,19 @@ export const useSelect = (props, emit) => {
             ? !states.inputValue.get()
             : true;
     });
+    const displayInputWrapper = computed(() => {
+        // Mirror element-plus: input-wrapper is hidden for non-filterable selects,
+        // when disabled, or (in multiple mode) when empty and not focused.
+        const hidden = !unref(props.filterable) ||
+            selectDisabled.get() ||
+            (unref(props.multiple) &&
+                !states.inputValue.get() &&
+                !isFocused.get());
+        return !hidden;
+    });
     const currentPlaceholder = computed(() => {
-        var _a;
         // console.warn('currentPlaceholder . ');
-        const _placeholder = (_a = unref(props.placeholder)) !== null && _a !== void 0 ? _a : t('el.select.placeholder');
+        const _placeholder = unref(props.placeholder) ?? t('el.select.placeholder');
         // console.warn('_placeholder is ', _placeholder);
         const label = states.selectedLabel.get();
         // console.warn('label is ', label);
@@ -283,7 +242,6 @@ export const useSelect = (props, emit) => {
     const mouseEnterEventName = computed(() => (isIOS ? null : 'mouseenter'));
     onMounted(() => {
         watch(() => unref(props.modelValue), (val, oldVal) => {
-            // console.warn('watch props.modelValue , val is ', val, ' and oldVal is ', oldVal);
             if (unref(props.multiple)) {
                 if (unref(props.filterable) && !unref(props.reserveKeyword)) {
                     states.inputValue.set('');
@@ -292,7 +250,7 @@ export const useSelect = (props, emit) => {
             }
             setSelected();
             if (!isEqual(val, oldVal) && unref(props.validateEvent)) {
-                formItem === null || formItem === void 0 ? void 0 : formItem.validate('change').catch((err) => debugWarn(err));
+                formItem?.validate('change').catch((err) => debugWarn(err));
             }
         }, {
             flush: 'post',
@@ -308,12 +266,11 @@ export const useSelect = (props, emit) => {
                 states.previousQuery = null;
                 states.isBeforeHide = true;
             }
-            emit('visible-change', val);
         });
         watch(
         // fix `Array.prototype.push/splice/..` cannot trigger non-deep watcher
         // https://github.com/vuejs/vue-next/issues/2116
-        () => states.options.get().entries(), (val) => {
+        () => states.options.get(), () => {
             // console.error('watch states.options.get().entries(), val is ', val);
             if (!isClient)
                 return;
@@ -337,10 +294,25 @@ export const useSelect = (props, emit) => {
             hoverOption.set({});
         }
         optionsArray.get().forEach((option) => {
-            var _a;
-            (_a = option.hover) === null || _a === void 0 ? void 0 : _a.set(hoverOption.get() === option);
+            option.hover?.set(hoverOption.get() === option);
         });
     });
+    // `states.hoveringIndex` is a plain number (read directly by tests), so the
+    // watch above only re-fires when `optionsArray` changes. This helper applies
+    // the hover highlight synchronously whenever `hoveringIndex` is set, keeping
+    // it aligned with element-plus's reactive `hoveringIndex`.
+    const setHoverOption = (index) => {
+        states.hoveringIndex = index;
+        if (isNumber(index) && index > -1) {
+            hoverOption.set(optionsArray.get()[index] || {});
+        }
+        else {
+            hoverOption.set({});
+        }
+        optionsArray.get().forEach((option) => {
+            option.hover?.set(hoverOption.get() === option);
+        });
+    };
     effect(() => {
         // Anything could cause options changed, then update options
         // If you want to control it by condition, write here
@@ -349,25 +321,36 @@ export const useSelect = (props, emit) => {
         updateOptions();
     });
     const handleQueryChange = (val) => {
-        var _a, _b;
         if (states.previousQuery === val || isComposing.get()) {
             return;
         }
         states.previousQuery = val;
         if (unref(props.filterable) && isFunction(unref(props.filterMethod))) {
-            (_a = unref(props.filterMethod)) === null || _a === void 0 ? void 0 : _a(val);
+            unref(props.filterMethod)?.(val);
         }
         else if (unref(props.filterable) &&
             unref(props.remote) &&
             isFunction(unref(props.remoteMethod))) {
-            (_b = unref(props.remoteMethod)) === null || _b === void 0 ? void 0 : _b(val);
+            unref(props.remoteMethod)?.(val);
         }
+        // Ensure options are filtered against the new query *synchronously* before we
+        // compute the default hovered option. In @type-dom the `updateOptions` effect is
+        // flushed asynchronously, so without this `checkDefaultFirstOption` would sometimes
+        // run against the pre-filter option list and pick the wrong index.
+        updateOptions();
         if (unref(props.defaultFirstOption) &&
             (unref(props.filterable) || unref(props.remote)) &&
             filteredOptionsCount.get()) {
             nextTick(checkDefaultFirstOption);
         }
-        else {
+        else if (states.selected.get().length > 0) {
+            // Only re-derive the hover index from the current selection when something is
+            // actually selected. On a plain (non-filterable) expand with no selection,
+            // `watch(expanded)` calls `handleQueryChange('')` and this branch would schedule
+            // `updateHoveringIndex` via nextTick, which then fires *after* synchronous
+            // keyboard navigation (`navigateOptions`) and clobbers the hover index it set.
+            // Skipping it here leaves the navigated hover index intact (mirrors Element Plus,
+            // where `previousQuery` defaults to '' so the empty expand call early-returns).
             nextTick(updateHoveringIndex);
         }
     };
@@ -384,50 +367,64 @@ export const useSelect = (props, emit) => {
     const checkDefaultFirstOption = () => {
         const optionsInDropdown = optionsArray
             .get()
-            .filter((n) => { var _a; return n.visible && !n.props.disabled && !((_a = n.states) === null || _a === void 0 ? void 0 : _a.groupDisabled); });
-        const userCreatedOption = optionsInDropdown.find((n) => n.created);
+            .filter((n) => n.visible?.get() !== false && !n.props.disabled && !unref(n.states?.groupDisabled));
+        const userCreatedOption = optionsInDropdown.find((n) => n.props.isCreated); // todo n.created
         const firstOriginOption = optionsInDropdown[0];
         const valueList = optionsArray.get().map((item) => item.value);
-        states.hoveringIndex = getValueIndex(valueList, userCreatedOption || firstOriginOption);
+        setHoverOption(getValueIndex(valueList, userCreatedOption || firstOriginOption));
     };
     const setSelected = () => {
-        var _a;
-        // console.warn('setSelected . ');
         if (!unref(props.multiple)) {
             const modelValue = unref(props.modelValue);
             const value = isArray(modelValue)
                 ? modelValue[0]
                 : modelValue;
-            const option = getOption(value);
-            // console.warn('setSelected . option.currentLabel is ', option.currentLabel);
-            states.selectedLabel.set((_a = unref(option.currentLabel)) !== null && _a !== void 0 ? _a : '');
-            states.selected = [option];
+            // An empty value means nothing is selected. `getOption('')` returns a truthy
+            // placeholder object, so we must guard on the *value* (not on the option) to
+            // avoid keeping a bogus selection — otherwise `states.selected` reports length 1
+            // and the open-time `updateHoveringIndex` resets the hover index that keyboard
+            // navigation just set back to -1.
+            if (value === '' || isUndefined(value) || value === null) {
+                states.selected.set([]);
+            }
+            else {
+                states.selected.set([getOption(value)]);
+            }
             return;
         }
-        else {
-            states.selectedLabel.set('');
-        }
         const result = [];
         if (!isUndefined(unref(props.modelValue))) {
             ensureArray(unref(props.modelValue)).forEach((value) => {
                 result.push(getOption(value));
             });
         }
-        states.selected = result;
+        states.selected.set(result);
     };
     const getOption = (value) => {
-        // console.warn('getOption . value is ', value);
         let option = undefined;
         const isObjectValue = isPlainObject(value);
-        for (let i = states.cachedOptions.size - 1; i >= 0; i--) {
-            const cachedOption = cachedOptionsArray.get()[i];
+        const valueKey = unref(props.valueKey);
+        // Iterate from the end so the last registered option wins (matches element-plus).
+        const cachedOptionsArray = Array.from(states.cachedOptions.values());
+        for (let i = cachedOptionsArray.length - 1; i >= 0; i--) {
+            const cachedOption = cachedOptionsArray[i];
+            if (!cachedOption)
+                continue;
             const isEqualValue = isObjectValue
-                ? get(cachedOption.value, unref(props.valueKey)) === get(value, unref(props.valueKey))
-                : (cachedOption === null || cachedOption === void 0 ? void 0 : cachedOption.value) === value;
+                ? get(cachedOption.value, valueKey) === get(value, valueKey)
+                : cachedOption.value === value;
             if (isEqualValue) {
                 option = {
-                    value,
-                    currentLabel: cachedOption === null || cachedOption === void 0 ? void 0 : cachedOption.currentLabel,
+                    // Mirrors element-plus: index of the option among the rendered,
+                    // non-created options (`optionsArray.filter(o => !o.created).indexOf(...)`).
+                    index: optionsArray
+                        .get()
+                        .filter((opt) => !opt.props.isCreated)
+                        .indexOf(cachedOption),
+                    // expose `value` as a signal to mirror element-plus's option proxy
+                    // (tests read `selected[i].value.get()`), while the component uses `unref`.
+                    value: signal(cachedOption.value),
+                    currentLabel: cachedOption.currentLabel ?? computed(() => cachedOption.props?.label ?? value),
                     get isDisabled() {
                         return cachedOption.isDisabled;
                     },
@@ -437,32 +434,48 @@ export const useSelect = (props, emit) => {
         }
         if (option)
             return option;
-        const label = isObjectValue ? value.label : value !== null && value !== void 0 ? value : '';
+        const existingSelected = states.selected.get().find((item) => isObjectValue
+            ? get(unref(item.value), valueKey) === get(value, valueKey)
+            : unref(item.value) === value);
+        const label = isObjectValue
+            ? value.label
+            : existingSelected
+                ? unref(existingSelected.currentLabel)
+                : (value ?? '');
         const newOption = {
-            value,
+            // element-plus reports -1 for values that are not currently rendered.
+            index: -1,
+            // keep `value` a signal for parity with the found branch (selected items expose
+            // `value.get()`); the component consumers use `unref(item.value)` which is fine.
+            value: signal(value),
             currentLabel: computed(() => label),
         };
         return newOption;
     };
     const updateHoveringIndex = () => {
-        states.hoveringIndex = optionsArray
-            .get()
-            .findIndex((item) => states.selected.some((selected) => getValueKey(selected) === getValueKey(item)));
+        const selected = states.selected.get();
+        const length = selected.length;
+        if (length > 0) {
+            const lastOption = selected[length - 1];
+            setHoverOption(optionsArray
+                .get()
+                .findIndex((item) => getValueKey(lastOption) === getValueKey(item)));
+        }
+        else {
+            setHoverOption(-1);
+        }
     };
     const resetSelectionWidth = () => {
-        states.selectionWidth = Number.parseFloat(window.getComputedStyle(selectionRef.get()).width);
+        states.selectionWidth.set(Number.parseFloat(window.getComputedStyle(selectionRef.get()).width));
     };
     const resetCollapseItemWidth = () => {
-        var _a;
-        states.collapseItemWidth = (_a = collapseItemRef === null || collapseItemRef === void 0 ? void 0 : collapseItemRef.get()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+        states.collapseItemWidth.set(collapseItemRef?.get()?.getBoundingClientRect().width);
     };
     const updateTooltip = () => {
-        var _a, _b;
-        (_b = (_a = tooltipRef.get()) === null || _a === void 0 ? void 0 : _a.updatePopper) === null || _b === void 0 ? void 0 : _b.call(_a);
+        tooltipRef.get()?.updatePopper?.();
     };
     const updateTagTooltip = () => {
-        var _a, _b;
-        (_b = (_a = tagTooltipRef.get()) === null || _a === void 0 ? void 0 : _a.updatePopper) === null || _b === void 0 ? void 0 : _b.call(_a);
+        tagTooltipRef.get()?.updatePopper?.();
     };
     const onInputChange = () => {
         if (states.inputValue.get().length > 0 && !expanded.get()) {
@@ -471,7 +484,15 @@ export const useSelect = (props, emit) => {
         handleQueryChange(states.inputValue.get());
     };
     const onInput = (event) => {
-        states.inputValue.set((event === null || event === void 0 ? void 0 : event.target).value);
+        // Set `debouncing` *before* `inputValue` so that, under @type-dom's eager
+        // signals (which flush the `visible-change` watcher synchronously on every
+        // dependency change), the dropdown does not momentarily flip visible when
+        // only `inputValue` has changed. This mirrors element-plus's Vue batched
+        // reactivity, where both assignments land in the same flush tick.
+        if (unref(props.remote)) {
+            debouncing.set(true);
+        }
+        states.inputValue.set((event?.target).value);
         if (unref(props.remote)) {
             debouncedOnInputChange();
         }
@@ -481,69 +502,77 @@ export const useSelect = (props, emit) => {
     };
     const debouncedOnInputChange = lodashDebounce(() => {
         onInputChange();
+        debouncing.set(false);
     }, debounce.get());
-    const emitChange = (val) => {
-        // console.warn('emitChange . val is ', val);
-        if (!isEqual(unref(props.modelValue), val)) {
+    // NOTE: in @type-dom the `update:modelValue` emit writes back to the vModel
+    // signal *synchronously* (unlike Vue where it is async). Because of that, by
+    // the time emitChange runs the modelValue is already the new value, so we must
+    // compare against the value captured BEFORE the update. Callers pass `oldVal`.
+    const emitChange = (val, oldVal) => {
+        const base = oldVal !== undefined ? oldVal : unref(props.modelValue);
+        if (!isEqual(base, val)) {
             emit(CHANGE_EVENT, val);
         }
     };
     const getLastNotDisabledIndex = (value) => findLastIndex(value, (it) => {
-        var _a;
         const option = states.cachedOptions.get(it);
-        return option && !option.props.disabled && !((_a = option.states) === null || _a === void 0 ? void 0 : _a.groupDisabled);
+        return !option?.props.disabled && !option?.states?.groupDisabled;
     });
     const deletePrevTag = (e) => {
-        var _a;
         if (!unref(props.multiple))
             return;
         if (e.code === EVENT_CODE.delete)
             return;
-        if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.value.length) <= 0) {
+        if (e.target?.value.length <= 0) {
             const value = ensureArray(unref(props.modelValue)).slice();
             const lastNotDisabledIndex = getLastNotDisabledIndex(value);
             if (lastNotDisabledIndex < 0)
                 return;
             const removeTagValue = value[lastNotDisabledIndex];
             value.splice(lastNotDisabledIndex, 1);
+            const oldValue = unref(props.modelValue);
             emit(UPDATE_MODEL_EVENT, value);
-            emitChange(value);
+            emitChange(value, oldValue);
             emit('remove-tag', removeTagValue);
         }
     };
     const deleteTag = (event, tag) => {
-        const index = states.selected.indexOf(tag);
+        const index = states.selected.get().indexOf(tag);
         if (index > -1 && !selectDisabled.get()) {
             const value = ensureArray(unref(props.modelValue)).slice();
             value.splice(index, 1);
+            const oldValue = unref(props.modelValue);
             emit(UPDATE_MODEL_EVENT, value);
-            emitChange(value);
-            emit('remove-tag', tag.value);
+            emitChange(value, oldValue);
+            // `selected[i].value` is a signal (see `getOption`), so unwrap it —
+            // element-plus emits the raw value here.
+            emit('remove-tag', unref(tag.value));
         }
-        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        event?.stopPropagation();
         focus();
     };
     const deleteSelected = (event) => {
-        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        event?.stopPropagation();
         const value = unref(props.multiple) ? [] : valueOnClear.get();
         if (unref(props.multiple)) {
-            for (const item of states.selected) {
-                if (item.isDisabled)
-                    value.push(item.value);
+            for (const item of states.selected.get()) {
+                if (unref(item.isDisabled))
+                    value.push(unref(item.value));
             }
         }
+        const oldValue = unref(props.modelValue);
         emit(UPDATE_MODEL_EVENT, value);
-        emitChange(value);
-        states.hoveringIndex = -1;
+        emitChange(value, oldValue);
+        setHoverOption(-1);
         expanded.set(false);
         emit('clear');
         focus();
     };
     const handleOptionSelect = (option) => {
-        var _a;
-        // console.warn('handleOptionSelect . option is ', option);
+        let emittedValue;
         if (unref(props.multiple)) {
-            const value = ensureArray((_a = unref(props.modelValue)) !== null && _a !== void 0 ? _a : []).slice();
+            const oldValue = unref(props.modelValue);
+            const value = ensureArray(oldValue ?? []).slice();
             const optionIndex = getValueIndex(value, option);
             if (optionIndex > -1) {
                 value.splice(optionIndex, 1);
@@ -552,22 +581,37 @@ export const useSelect = (props, emit) => {
                 unref(value.length) < unref(props.multipleLimit)) {
                 value.push(unref(option.props.value));
             }
+            emittedValue = value;
             emit(UPDATE_MODEL_EVENT, value);
-            emitChange(value);
-            if (option.created) {
+            emitChange(value, oldValue);
+            if (option.props.isCreated) { // TODO  option.created
                 handleQueryChange('');
             }
-            if (unref(props.filterable) && !unref(props.reserveKeyword)) {
+            if (unref(props.filterable) &&
+                (option.props.isCreated || !unref(props.reserveKeyword))) {
                 states.inputValue.set('');
             }
         }
         else {
             // states.selectedLabel?.set(option.props.label ?? ''); // add by me todo
             // option.currentLabel?.set(option.props.label);
-            emit(UPDATE_MODEL_EVENT, option.props.value);
-            emitChange(option.props.value);
+            const oldValue = unref(props.modelValue);
+            const optionValue = unref(option.props.value);
+            emittedValue = optionValue;
+            if (!isEqual(oldValue, optionValue)) {
+                emit(UPDATE_MODEL_EVENT, optionValue);
+            }
+            emitChange(optionValue, oldValue);
+            states.selectedLabel.set(unref(option.currentLabel));
             expanded.set(false);
         }
+        // Keep `states.selected` in sync with the click immediately, regardless of whether
+        // a v-model is bound to the parent. The `modelValue` watch also calls setSelected(),
+        // but when no v-model is bound (modelValue stays undefined) that would otherwise
+        // leave `states.selected` empty after selection.
+        states.selected.set(unref(props.multiple)
+            ? ensureArray(emittedValue).map((v) => getOption(v))
+            : [getOption(emittedValue)]);
         focus();
         if (expanded.get())
             return;
@@ -585,63 +629,94 @@ export const useSelect = (props, emit) => {
         });
     };
     const scrollToOption = (option) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const targetOption = isArray(option) ? option[0] : option;
+        // Scroll to the most recently selected option (last in the selection) when an
+        // array is passed (e.g. on menu open), matching element-plus's behaviour.
+        const targetOption = isArray(option) ? option[option.length - 1] : option;
         let target = null;
-        if (targetOption === null || targetOption === void 0 ? void 0 : targetOption.value) {
+        const targetValue = unref(targetOption?.value);
+        if (targetValue !== undefined && targetValue !== null) {
             const options = optionsArray
                 .get()
-                .filter((item) => item.value === targetOption.value);
+                .filter((item) => unref(item.value) === targetValue ||
+                item.props?.value === targetValue);
             if (options.length > 0) {
                 target = options[0].dom;
             }
         }
         if (tooltipRef.get() && target) {
-            const menu = (_f = (_e = (_d = (_c = (_b = (_a = tooltipRef
-                .get()) === null || _a === void 0 ? void 0 : _a.popperRef) === null || _b === void 0 ? void 0 : _b.get()) === null || _c === void 0 ? void 0 : _c.contentRef) === null || _d === void 0 ? void 0 : _d.get()) === null || _e === void 0 ? void 0 : _e.querySelector) === null || _f === void 0 ? void 0 : _f.call(_e, `.${nsSelect.be('dropdown', 'wrap')}`);
+            const menu = tooltipRef
+                .get()
+                ?.popperRef?.get()
+                ?.contentRef?.get()
+                ?.querySelector?.(`.${nsSelect.be('dropdown', 'wrap')}`);
             if (menu) {
                 scrollIntoView(menu, target);
             }
         }
-        (_h = (_g = scrollbarRef === null || scrollbarRef === void 0 ? void 0 : scrollbarRef.get()) === null || _g === void 0 ? void 0 : _g.handleScroll) === null || _h === void 0 ? void 0 : _h.call(_g);
+        scrollbarRef?.get()?.handleScroll?.();
     };
     const onOptionCreate = (vm) => {
-        // console.warn('onOptionCreate . ');
-        states.options.get().set(unref(vm.props.value), vm);
-        states.options.set(states.options.get()); // 触发监听
-        states.cachedOptions.set(unref(vm.props.value), vm);
+        const value = unref(vm.props.value);
+        // 去重保护：避免下拉因渲染选项触发 onOptionCreate -> set states -> 再次渲染而选项无限循环
+        if (states.cachedOptions.get(value) === vm)
+            return;
+        // Assign a fresh Map instance so the signal actually notifies subscribers
+        // (mutating the existing Map in place and re-setting the same reference would
+        // be a no-op under Object.is equality and `optionsArray`/`filteredOptionsCount`
+        // would never recompute on dynamic option changes).
+        const newOptions = new Map(states.options.get());
+        newOptions.set(value, vm);
+        states.options.set(newOptions);
+        states.cachedOptions.set(value, vm);
+        // option 注册时若命中 modelValue，立即同步反显，避免因 TdOption 经
+        // teleport / TdOptions 延迟挂载导致父组件 onMounted 中 setSelected() 拿不到 cachedOptions
+        const modelValue = unref(props.modelValue);
+        if (isArray(modelValue)) {
+            if (modelValue.some((v) => v === value)) {
+                if (unref(props.multiple)) {
+                    setSelected();
+                }
+                else if (!isUndefined(modelValue[0]) && modelValue[0] === value) {
+                    states.selected.set([getOption(value)]);
+                }
+            }
+        }
+        else if (modelValue === value) {
+            if (unref(props.multiple)) {
+                setSelected();
+            }
+            else {
+                states.selected.set([getOption(value)]);
+            }
+        }
     };
     const onOptionDestroy = (key, vm) => {
         if (states.options.get().get(key) === vm) {
-            states.options.get().delete(key);
-            // console.warn('onOptionDestroy . then states.options.set')
-            states.options.set(states.options.get()); // 触发监听
+            const newOptions = new Map(states.options.get());
+            newOptions.delete(key);
+            states.options.set(newOptions); // 触发监听
         }
     };
     const popperRef = computed(() => {
-        var _a, _b, _c, _d;
-        return (_d = (_c = (_b = (_a = tooltipRef.get()) === null || _a === void 0 ? void 0 : _a.popperRef) === null || _b === void 0 ? void 0 : _b.get()) === null || _c === void 0 ? void 0 : _c.contentRef) === null || _d === void 0 ? void 0 : _d.get();
+        return tooltipRef.get()?.popperRef?.get()?.contentRef?.get();
     });
     const handleMenuEnter = () => {
         states.isBeforeHide = false;
         nextTick(() => {
-            var _a, _b;
-            (_b = (_a = scrollbarRef.get()) === null || _a === void 0 ? void 0 : _a.updateDom) === null || _b === void 0 ? void 0 : _b.call(_a);
-            scrollToOption(states.selected);
+            scrollbarRef.get()?.update?.();
+            scrollToOption(states.selected.get());
         });
     };
     const focus = () => {
-        var _a;
-        (_a = inputRef.get()) === null || _a === void 0 ? void 0 : _a.focus();
+        inputRef.get()?.focus();
     };
     const blur = () => {
-        var _a;
         if (expanded.get()) {
             expanded.set(false);
-            nextTick(() => { var _a; return (_a = inputRef.get()) === null || _a === void 0 ? void 0 : _a.blur(); });
+            nextTick(() => inputRef.get()?.blur());
             return;
         }
-        (_a = inputRef.get()) === null || _a === void 0 ? void 0 : _a.blur();
+        inputRef.get()?.blur();
     };
     const handleClearClick = (event) => {
         deleteSelected(event);
@@ -649,7 +724,7 @@ export const useSelect = (props, emit) => {
     const handleClickOutside = (event) => {
         expanded.set(false);
         if (isFocused.get()) {
-            const _event = new FocusEvent('focus', event);
+            const _event = new FocusEvent('blur', event);
             nextTick(() => handleBlur(_event));
         }
     };
@@ -661,19 +736,28 @@ export const useSelect = (props, emit) => {
             expanded.set(false);
         }
     };
-    const toggleMenu = () => {
-        if (selectDisabled.get())
+    const toggleMenu = (event) => {
+        if (selectDisabled.get() ||
+            (unref(props.filterable) &&
+                expanded.get() &&
+                event &&
+                !suffixRef.get()?.contains(event.target)))
             return;
         // We only set the inputHovering state to true on mouseenter event on iOS devices
         // To keep the state updated we set it here to true
         if (isIOS)
-            states.inputHovering = true;
+            states.inputHovering.set(true);
         if (states.menuVisibleOnFocus) {
             // controlled by automaticDropdown
             states.menuVisibleOnFocus = false;
         }
         else {
             expanded.set(!expanded.get());
+            // Mirror element-plus: focusing the input when the dropdown opens keeps the
+            // select interactive (and prevents a mousedown on an option from blurring it).
+            if (expanded.get()) {
+                focus();
+            }
         }
     };
     const selectOption = () => {
@@ -681,33 +765,43 @@ export const useSelect = (props, emit) => {
             toggleMenu();
         }
         else {
-            const option = optionsArray.get()[states.hoveringIndex];
-            if (option && !option.isDisabled) {
+            const options = optionsArray.get();
+            let option = options[states.hoveringIndex];
+            // allowCreate: when no real option is hovered but a synthetic "create new"
+            // option is shown (showNewOption), fall back to selecting that created option.
+            if ((!option || option.isDisabled?.get()) && showNewOption.get()) {
+                const created = options.find((o) => o.props.isCreated);
+                if (created)
+                    option = created;
+            }
+            if (option && !option.isDisabled?.get()) {
                 handleOptionSelect(option);
             }
         }
     };
     const getValueKey = (item) => {
-        return isObject(item.value) ? get(item.value, unref(props.valueKey)) : item.value;
+        const itemValue = unref(item.value);
+        return isObject(itemValue) ? get(itemValue, unref(props.valueKey)) : itemValue;
     };
     const optionsAllDisabled = computed(() => optionsArray
         .get()
-        .filter((option) => option.visible)
-        .every((option) => option.isDisabled));
+        .filter((option) => option.visible?.get() !== false)
+        .every((option) => option.isDisabled?.get()));
     const showTagList = computed(() => {
         if (!unref(props.multiple)) {
             return [];
         }
-        return unref(props.collapseTags)
-            ? states.selected.slice(0, unref(props.maxCollapseTags))
-            : states.selected;
+        const result = unref(props.collapseTags)
+            ? states.selected.get().slice(0, unref(props.maxCollapseTags))
+            : states.selected.get();
+        return result;
     });
     const collapseTagList = computed(() => {
         if (!unref(props.multiple)) {
             return [];
         }
         return unref(props.collapseTags)
-            ? states.selected.slice(unref(props.maxCollapseTags))
+            ? states.selected.get().slice(unref(props.maxCollapseTags))
             : [];
     });
     const navigateOptions = (direction) => {
@@ -720,22 +814,49 @@ export const useSelect = (props, emit) => {
             isComposing.get())
             return;
         if (!optionsAllDisabled.get()) {
+            let idx = states.hoveringIndex;
             if (direction === 'next') {
-                states.hoveringIndex++;
-                if (states.hoveringIndex === states.options.get().size) {
-                    states.hoveringIndex = 0;
+                idx++;
+                if (idx === states.options.get().size) {
+                    idx = 0;
                 }
             }
             else if (direction === 'prev') {
-                states.hoveringIndex--;
-                if (states.hoveringIndex < 0) {
-                    states.hoveringIndex = states.options.get().size - 1;
+                idx--;
+                if (idx < 0) {
+                    idx = states.options.get().size - 1;
                 }
             }
-            const option = optionsArray.get()[states.hoveringIndex];
-            if (option.isDisabled || !option.visible) {
+            const option = optionsArray.get()[idx];
+            if (option?.isDisabled?.get() || option?.visible?.get() === false) {
+                states.hoveringIndex = idx;
                 navigateOptions(direction);
+                return;
+            }
+            setHoverOption(idx);
+            nextTick(() => scrollToOption(hoverOption.get()));
+        }
+    };
+    const findFocusableIndex = (arr, start, step, len) => {
+        for (let i = start; i >= 0 && i < len; i += step) {
+            const obj = arr[i];
+            if (!obj?.isDisabled?.get() && obj?.visible?.get() !== false) {
+                return i;
             }
+        }
+        return null;
+    };
+    const focusOption = (targetIndex, mode) => {
+        const len = states.options.get().size;
+        if (len === 0)
+            return;
+        const start = clamp(targetIndex, 0, len - 1);
+        const options = optionsArray.get();
+        const direction = mode === 'up' ? -1 : 1;
+        const newIndex = findFocusableIndex(options, start, direction, len) ??
+            findFocusableIndex(options, start - direction, -direction, len);
+        if (newIndex != null) {
+            setHoverOption(newIndex);
             nextTick(() => scrollToOption(hoverOption.get()));
         }
     };
@@ -746,24 +867,52 @@ export const useSelect = (props, emit) => {
         return Number.parseFloat(style.gap || '6px');
     };
     // computed style
+    const MINIMUM_INPUT_WIDTH = 100;
     const tagStyle = computed(() => {
         const gapWidth = getGapWidth();
-        const maxWidth = collapseItemRef.get() && unref(props.maxCollapseTags) === 1
-            ? states.selectionWidth - states.collapseItemWidth - gapWidth
-            : states.selectionWidth;
-        return { maxWidth: `${maxWidth}px` };
+        const inputSlotWidth = unref(props.filterable) && !selectDisabled.get()
+            ? gapWidth + MINIMUM_INPUT_WIDTH
+            : 0;
+        // `collapseItemRef` is a template ref that Vue only populates once the `+N`
+        // tag is actually mounted. TypeDOM's `refDom` populates it at construction time
+        // (even when the tag is vIf'd off), so it can't gate this width. Replicate the
+        // real element-plus condition: a collapse slot exists only when the collapse tag
+        // is rendered, i.e. `selected.length > maxCollapseTags`.
+        const collapseSlotWidth = unref(props.collapseTags) &&
+            unref(props.maxCollapseTags) === 1 &&
+            states.selected.get().length > unref(props.maxCollapseTags)
+            ? states.collapseItemWidth.get() + gapWidth
+            : 0;
+        const reservedWidth = inputSlotWidth + collapseSlotWidth;
+        return { maxWidth: `calc(100% - ${reservedWidth}px)` };
     });
     const collapseTagStyle = computed(() => {
-        return { maxWidth: `${states.selectionWidth}px` };
+        return { maxWidth: `${states.selectionWidth.get()}px` };
     });
     const popupScroll = (data) => {
         emit('popup-scroll', data);
     };
+    const popupScrollEnd = (direction) => {
+        emit('end-reached', direction);
+    };
     useResizeObserver(selectionRef, resetSelectionWidth);
-    useResizeObserver(menuRef, updateTooltip);
+    useResizeObserver(menuRef, () => {
+        // #21498: only keep the tooltip in sync while the dropdown is visible
+        // (mirrors element-plus, which stops the menuRef observer when collapsed).
+        if (dropdownMenuVisible.get()) {
+            updateTooltip();
+        }
+    });
     useResizeObserver(wrapperRef, updateTooltip);
     useResizeObserver(tagMenuRef, updateTagTooltip);
     useResizeObserver(collapseItemRef, resetCollapseItemWidth);
+    // Mirrors element-plus: `visible-change` is driven by `dropdownMenuVisible`
+    // (which accounts for loading / remote-empty / debouncing), NOT by the raw
+    // `expanded` state — otherwise a remote select with no results would emit
+    // `true` as soon as it is opened.
+    watch(() => dropdownMenuVisible.get(), (newVal) => {
+        emit('visible-change', newVal);
+    });
     onMounted(() => {
         setSelected();
     });
@@ -790,6 +939,7 @@ export const useSelect = (props, emit) => {
         scrollToOption,
         hasModelValue,
         shouldShowPlaceholder,
+        displayInputWrapper,
         currentPlaceholder,
         mouseEnterEventName,
         needStatusIcon,
@@ -802,11 +952,13 @@ export const useSelect = (props, emit) => {
         updateOptions,
         collapseTagSize,
         setSelected,
+        setHoverOption,
         selectDisabled,
         emptyText,
         handleCompositionStart,
         handleCompositionUpdate,
         handleCompositionEnd,
+        isComposing,
         onOptionCreate,
         onOptionDestroy,
         handleMenuEnter,
@@ -819,10 +971,12 @@ export const useSelect = (props, emit) => {
         selectOption,
         getValueKey,
         navigateOptions,
+        focusOption,
         dropdownMenuVisible,
         showTagList,
         collapseTagList,
         popupScroll,
+        popupScrollEnd,
         // computed style
         tagStyle,
         collapseTagStyle,