From 3b0eb674c463a7a06c92e035cdbc7e27b6a0acc9 Mon Sep 17 00:00:00 2001 From: Hunter Chang <716376+ChangoMan@users.noreply.github.com> Date: Thu, 29 Aug 2024 20:44:22 +0800 Subject: [PATCH] use css focus for eligible dropdown --- .../admin/_components/SubmissionEligible.tsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/nextjs/app/admin/_components/SubmissionEligible.tsx b/packages/nextjs/app/admin/_components/SubmissionEligible.tsx index c5e6e35..4bca282 100644 --- a/packages/nextjs/app/admin/_components/SubmissionEligible.tsx +++ b/packages/nextjs/app/admin/_components/SubmissionEligible.tsx @@ -12,6 +12,14 @@ import { notification } from "~~/utils/scaffold-eth"; const eligibleLabelStyles = "label cursor-pointer text-sm justify-start gap-2"; +// Close the dropdown by blurring the active element +const closeDropdown = () => { + const elem = document.activeElement; + if (elem instanceof HTMLElement) { + elem.blur(); + } +}; + export const SubmissionEligible = ({ submission }: { submission: Submission }) => { const { mutateAsync: postNewEligible, isPending } = useMutation({ mutationFn: (newEligible: { eligible: boolean; clear: boolean }) => @@ -23,6 +31,7 @@ export const SubmissionEligible = ({ submission }: { submission: Submission }) = try { const result = await postNewEligible({ eligible: newEligible, clear: false }); + closeDropdown(); notification.success(result.message); refresh(); } catch (error: any) { @@ -58,8 +67,10 @@ export const SubmissionEligible = ({ submission }: { submission: Submission }) = } return ( -
- +
{buttonLabel} -
+
-
+ ); };