From 6a2e6b7f62c7e7b9f49bf3752e4a3d15353a167b Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Tue, 1 Aug 2023 18:43:38 +0500
Subject: [PATCH] fix: fixed forwardRef warning on customSelect

---
 .../src/components/customSelect.tsx           | 19 +++++++++++++------
 .../PermissionDialog/Permission.tsx           |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/client/packages/lowcoder-design/src/components/customSelect.tsx b/client/packages/lowcoder-design/src/components/customSelect.tsx
index 933890de1..8a5889b86 100644
--- a/client/packages/lowcoder-design/src/components/customSelect.tsx
+++ b/client/packages/lowcoder-design/src/components/customSelect.tsx
@@ -71,23 +71,29 @@ const SelectWrapper = styled.div<{ border?: boolean }>`
   }
 `;
 
-export type CustomSelectProps = {
+export interface CustomSelectProps extends AntdSelectProps {
   children?: JSX.Element | React.ReactNode;
-  innerRef?: React.Ref<HTMLDivElement> | undefined;
   border?: boolean;
 };
 
-function CustomSelect(props: CustomSelectProps & AntdSelectProps) {
+interface CustomSelectInterface extends React.ForwardRefExoticComponent<
+  CustomSelectProps & React.RefAttributes<HTMLDivElement>
+> {
+  Option: any;
+}
+const CustomSelect = React.forwardRef<HTMLDivElement, CustomSelectProps>((
+  props,
+  ref,
+) => {
   const {
     children,
-    innerRef,
     className,
     border,
     popupClassName = "custom-ant-select-dropdown",
     ...restProps
   } = props;
   return (
-    <SelectWrapper className={className} ref={innerRef} border={border}>
+    <SelectWrapper className={className} ref={ref} border={border}>
       <AntdSelect
         popupClassName={popupClassName}
         popupMatchSelectWidth={false}
@@ -96,9 +102,10 @@ function CustomSelect(props: CustomSelectProps & AntdSelectProps) {
       >
         {children}
       </AntdSelect>
+      <div></div>
     </SelectWrapper>
   );
-}
+}) as CustomSelectInterface;
 
 CustomSelect.Option = AntdSelect.Option;
 export { CustomSelect };
diff --git a/client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx b/client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx
index 4fff667fc..b97548de2 100644
--- a/client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx
+++ b/client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx
@@ -328,7 +328,7 @@ const PermissionSelector = (props: {
       <PermissionSelectWrapper>
         <AddPermissionsSelect
           open
-          innerRef={selectRef}
+          ref={selectRef}
           placeholder={trans("home.addPermissionPlaceholder")}
           mode="multiple"
           getPopupContainer={() => document.getElementById("add-app-user-permission-dropdown")!}