From 6372817f30fbb4108e2cdf66efd69c830eb45711 Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Thu, 17 Mar 2022 00:16:35 -0400
Subject: [PATCH] Close dropdown when clicked outside
---
src/cryptometrics/components/dropdown/Dropdown.js | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/src/cryptometrics/components/dropdown/Dropdown.js b/src/cryptometrics/components/dropdown/Dropdown.js
index 024740e..963426f 100644
--- a/src/cryptometrics/components/dropdown/Dropdown.js
+++ b/src/cryptometrics/components/dropdown/Dropdown.js
@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
import classNames from "classnames";
import { ChevronDownIcon } from "@heroicons/react/outline";
+import { useOnClickOutside } from "../../hooks";
function getCoin(list, id) {
for (let i = 0; i < list.length; i++) {
@@ -13,13 +14,16 @@ function getCoin(list, id) {
function Dropdown({ list, value, setValue, disabled }) {
const [open, setOpen] = useState(false);
+ const ref = useRef(null);
+ const callbackDropdownClose = useCallback(() => setOpen(false), []);
+ useOnClickOutside(ref, callbackDropdownClose);
useEffect(() => {
setOpen(false);
}, [value]);
return (
- <div className="relative">
+ <div className="relative" ref={ref}>
<button
className={classNames(" px-3 py-2 rounded-md font-light", {
"dark:bg-white dark:text-gray-800": false,
--
GitLab