From 4da5fcaa463cfc34f0c6ecd55c53bd2c7a5c6d81 Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Mon, 14 Mar 2022 12:41:57 -0400
Subject: [PATCH] Add feature to close dropdown when clicked outside
---
.../components/dropdown/FilterDropdown.js | 10 +++++++---
src/cryptometrics/pages/index.js | 9 ++++++---
2 files changed, 13 insertions(+), 6 deletions(-)
diff --git a/src/cryptometrics/components/dropdown/FilterDropdown.js b/src/cryptometrics/components/dropdown/FilterDropdown.js
index a95b636..8ea5717 100644
--- a/src/cryptometrics/components/dropdown/FilterDropdown.js
+++ b/src/cryptometrics/components/dropdown/FilterDropdown.js
@@ -5,9 +5,13 @@ import Button from "../button/Button";
import { RadioInputForm } from "../radio/RadioForm";
import { CSSTransition } from "react-transition-group";
-export function FilterDropdown({ filterOptions, setOpen, addFilter }) {
+export function FilterDropdown({
+ filterOptions,
+ setOpen,
+ addFilter,
+ dropdownRef,
+}) {
const [selectedFilter, setSelectedFilter] = useState(null);
-
const [radioValue, setRadioValue] = useState("is");
const [inputValue, setInputValue] = useState("");
@@ -39,7 +43,7 @@ export function FilterDropdown({ filterOptions, setOpen, addFilter }) {
};
return (
- <div className="absolute flex flex-row z-50">
+ <div className="absolute flex flex-row z-50" ref={dropdownRef}>
<div
className={classNames(
"dark:bg-dark-600 w-56 h-max max-h-72 rounded-xl mt-2 transition-all duration-100 p-1 overflow-y-scroll shadow-lg shadow-dark-600"
diff --git a/src/cryptometrics/pages/index.js b/src/cryptometrics/pages/index.js
index c018b2d..5612e72 100644
--- a/src/cryptometrics/pages/index.js
+++ b/src/cryptometrics/pages/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useCallback } from "react";
import Head from "next/head";
import Container from "../components/content/Container";
import Main from "../components/content/Main";
@@ -17,7 +17,7 @@ import {
TableIcon,
XIcon,
} from "@heroicons/react/outline";
-import useFilters from "../hooks/useFilters";
+import { useFilters, useOnClickOutside } from "../hooks";
import { Filter, FilterButton, Filters } from "../components/filters/Filter";
import { FilterDropdown } from "../components/dropdown/FilterDropdown";
import { filterOptions } from "../constants";
@@ -29,7 +29,10 @@ import Link from "next/link";
export default function Home() {
const [filters, addFilter, removeFilter] = useFilters([]);
+ const filterDropdownRef = useRef(null);
const [dropdownOpen, setDropdownOpen] = useState(false);
+ const callbackDropdownClose = useCallback(() => setDropdownOpen(false), []);
+ useOnClickOutside(filterDropdownRef, callbackDropdownClose);
const [searchText, setSearchText] = useState("");
const listOfCoins = useCryptoList("usd", 21, false);
@@ -93,9 +96,9 @@ export default function Home() {
setDropdownOpen(!dropdownOpen) && addFilter({})
}
/>
-
{dropdownOpen && (
<FilterDropdown
+ dropdownRef={filterDropdownRef}
setOpen={setDropdownOpen}
addFilter={addFilter}
filterOptions={Object.keys(filterOptions)
--
GitLab