fix(Popup): fix panel null bug (#3061)

* fix(Popup): fix panel null bug * chore: fix * fix(Popup): fix panel null bug
Tencent · Aug 23, 2024 · 20eea7d · 20eea7d
1 parent f360958
commit 20eea7d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx
@@ -83,6 +83,13 @@ const Popup = forwardRef<PopupRef, PopupProps>((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
@@ -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
@@ -64,6 +64,10 @@ export default function useSingle(props: TdSelectInputProps) {
     }
   };
 
+  const handleEmptyPanelBlur = (value: string, { e }: { e: React.FocusEvent<HTMLInputElement> }) => {
+    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,