fix: 修复ProFormSelect/LightSelect选中之后没有自动隐藏和fieldProps使用open属性不能效两个问题

ant-design · Jan 2, 2024 · 3029866 · 3029866
1 parent a2be303
commit 3029866
Showing 1 changed file with 37 additions and 21 deletions.
diff --git a/packages/field/src/components/Select/LightSelect/index.tsx b/packages/field/src/components/Select/LightSelect/index.tsx
@@ -24,9 +24,9 @@ const getValueOrLabel = (
   valueMap: Record<string, string>,
   v:
     | {
-        label: string;
-        value: string;
-      }
+      label: string;
+      value: string;
+    }
     | string,
 ) => {
   if (typeof v !== 'object') {
@@ -108,6 +108,14 @@ const LightSelect: React.ForwardRefRenderFunction<
     });
     return values;
   }, [labelPropsName, options, valuePropsName, optionLabelProp]);
+  // 修复用户在使用ProFormSelect组件时，在fieldProps中使用open属性，不生效。
+  // ProComponents文档中写到“与select相同，且fieldProps同antd组件中的props”描述方案不相符
+  const mergeOpen = useMemo(() => {
+    if (Reflect.has(restProps, 'open')) {
+      return restProps?.open
+    }
+    return open;
+  }, [open, restProps])
 
   const filterValue = Array.isArray(value)
     ? value.map((v) => getValueOrLabel(valueMap, v))
@@ -134,7 +142,15 @@ const LightSelect: React.ForwardRefRenderFunction<
         if (isLabelClick) {
           setOpen(!open);
         } else {
-          setOpen(true);
+          // 这里注释掉
+          /**
+           * 因为这里与代码
+           *  if (mode !== 'multiple') {
+           *   setOpen(false);
+           *  }
+           * 冲突了，导致这段代码不生效
+           */
+          // setOpen(true); 
         }
       }}
     >
@@ -182,7 +198,7 @@ const LightSelect: React.ForwardRefRenderFunction<
             </div>
           );
         }}
-        open={open}
+        open={mergeOpen}
         onDropdownVisibleChange={(isOpen) => {
           if (!isOpen) {
             //  测试环境下直接跑
@@ -198,22 +214,22 @@ const LightSelect: React.ForwardRefRenderFunction<
           onSearch || !keyword
             ? options
             : options?.filter((o) => {
-                if (optionFilterProp) {
-                  return toArray(o[optionFilterProp])
-                    .join('')
-                    .toLowerCase()
-                    .includes(keyword);
-                }
-                return (
-                  String(o[labelPropsName])
-                    ?.toLowerCase()
-                    ?.includes(keyword?.toLowerCase()) ||
-                  o[valuePropsName]
-                    ?.toString()
-                    ?.toLowerCase()
-                    ?.includes(keyword?.toLowerCase())
-                );
-              })
+              if (optionFilterProp) {
+                return toArray(o[optionFilterProp])
+                  .join('')
+                  .toLowerCase()
+                  .includes(keyword);
+              }
+              return (
+                String(o[labelPropsName])
+                  ?.toLowerCase()
+                  ?.includes(keyword?.toLowerCase()) ||
+                o[valuePropsName]
+                  ?.toString()
+                  ?.toLowerCase()
+                  ?.includes(keyword?.toLowerCase())
+              );
+            })
         }
       />
       <FieldLabel