From f1ef50e606c28c4b88c0572aa6cd0521f51eef8f Mon Sep 17 00:00:00 2001
From: Nafees Nazik <84864519+G3root@users.noreply.github.com>
Date: Thu, 13 Jul 2023 18:59:29 +0530
Subject: [PATCH] fix: upload csv button not clickable (#9981)

Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
---
 .../components/MemberInvitationModal.tsx      | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx
index a081101028..03a48921af 100644
--- a/packages/features/ee/teams/components/MemberInvitationModal.tsx
+++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx
@@ -1,6 +1,6 @@
 import { BuildingIcon, PaperclipIcon, UserIcon, Users } from "lucide-react";
 import { Trans } from "next-i18next";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useRef } from "react";
 import type { FormEvent } from "react";
 import { Controller, useForm } from "react-hook-form";
 
@@ -150,6 +150,8 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
     setModalInputMode("INDIVIDUAL");
   };
 
+  const importRef = useRef<HTMLInputElement | null>(null);
+
   return (
     <Dialog
       name="inviteModal"
@@ -159,6 +161,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
         newMemberFormMethods.reset();
       }}>
       <DialogContent
+        enableOverflow
         type="creation"
         title={t("invite_team_member")}
         description={
@@ -253,19 +256,24 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
                 <Button
                   type="button"
                   color="secondary"
+                  onClick={() => {
+                    if (importRef.current) {
+                      importRef.current.click();
+                    }
+                  }}
                   StartIcon={PaperclipIcon}
                   className="mt-3 justify-center stroke-2">
-                  <label htmlFor="bulkInvite">
-                    Upload a .csv file
-                    <input
-                      id="bulkInvite"
-                      type="file"
-                      accept=".csv"
-                      style={{ display: "none" }}
-                      onChange={handleFileUpload}
-                    />
-                  </label>
+                  Upload a .csv file
                 </Button>
+                <input
+                  ref={importRef}
+                  hidden
+                  id="bulkInvite"
+                  type="file"
+                  accept=".csv"
+                  style={{ display: "none" }}
+                  onChange={handleFileUpload}
+                />
               </div>
             )}
             {modalImportMode === "ORGANIZATION" && (