diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx index 7e0b78a1e0..31e101cac2 100644 --- a/src/popup/Popup.tsx +++ b/src/popup/Popup.tsx @@ -83,6 +83,13 @@ const Popup = forwardRef((originalProps, ref) => { // 默认动画时长 const DEFAULT_TRANSITION_TIMEOUT = 180; + // 处理切换 panel 为 null 和正常内容动态切换的情况 + useEffect(() => { + if (!content && hideEmptyPopup) { + requestAnimationFrame(() => setPopupElement(null)); + } + }, [content, hideEmptyPopup]); + // 判断展示浮层 const showOverlay = useMemo(() => { if (hideEmptyPopup && !content) return false; diff --git a/src/select-input/useMultiple.tsx b/src/select-input/useMultiple.tsx index 86910aaa3f..cfe4d98637 100644 --- a/src/select-input/useMultiple.tsx +++ b/src/select-input/useMultiple.tsx @@ -71,6 +71,7 @@ export default function useMultiple(props: TdSelectInputProps) { onFocus={(val, context) => { props.onFocus?.(props.value, { ...context, tagInputValue: val }); }} + onBlur={!props.panel ? props.onBlur : null} {...props.tagInputProps} inputProps={{ ...props.inputProps, diff --git a/src/select-input/useSingle.tsx b/src/select-input/useSingle.tsx index 8e768fe739..39a41c0b76 100644 --- a/src/select-input/useSingle.tsx +++ b/src/select-input/useSingle.tsx @@ -64,6 +64,10 @@ export default function useSingle(props: TdSelectInputProps) { } }; + const handleEmptyPanelBlur = (value: string, { e }: { e: React.FocusEvent }) => { + props.onBlur?.(value, { e, inputValue: value }); + }; + const renderSelectSingle = (popupVisible: boolean) => { // 单选,值的呈现方式 const singleValueDisplay = !props.multiple ? props.valueDisplay : null; @@ -93,6 +97,8 @@ export default function useSingle(props: TdSelectInputProps) { onEnter={(val, context) => { props.onEnter?.(value, { ...context, inputValue: val }); }} + // onBlur need to triggered by input when popup panel is null + onBlur={!props.panel ? handleEmptyPanelBlur : null} {...props.inputProps} inputClass={classNames(props.inputProps?.className, { [`${classPrefix}-input--focused`]: popupVisible,