fix: upload csv button not clickable (#9981)

Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
pull/10138/head
Nafees Nazik 2023-07-13 18:59:29 +05:30 committed by GitHub
parent 22c51ba483
commit f1ef50e606
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 11 deletions

View File

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