From 10657d47960cdc62ef5499954a50359cebbadb94 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Wed, 29 Mar 2023 18:18:45 +0530
Subject: [PATCH] fix: filter menu not closing on select other parent option
 (#587)

---
 .../app/components/ui/multi-level-dropdown.tsx | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/apps/app/components/ui/multi-level-dropdown.tsx b/apps/app/components/ui/multi-level-dropdown.tsx
index 9be634ba6..6abf22b79 100644
--- a/apps/app/components/ui/multi-level-dropdown.tsx
+++ b/apps/app/components/ui/multi-level-dropdown.tsx
@@ -100,8 +100,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                     )}
                   </Menu.Item>
                   {option.children && option.id === openChildFor && (
-                    <Menu.Items
-                      static
+                    <div
                       className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
                         direction === "left"
                           ? "right-full -translate-x-1"
@@ -120,24 +119,21 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                     >
                       <div className="space-y-1 p-1">
                         {option.children.map((child) => (
-                          <Menu.Item
+                          <button
                             key={child.id}
-                            as="button"
                             type="button"
                             onClick={() => {
                               onSelect(child.value);
                             }}
-                            className={({ active }) =>
-                              `${
-                                active || child.selected ? "bg-gray-100" : "text-gray-900"
-                              } flex w-full items-center break-all rounded px-1 py-1.5 text-left capitalize`
-                            }
+                            className={`${
+                              child.selected ? "bg-gray-100" : "text-gray-900"
+                            } flex w-full items-center break-all rounded px-1 py-1.5 text-left capitalize hover:bg-gray-100`}
                           >
                             {child.label}
-                          </Menu.Item>
+                          </button>
                         ))}
                       </div>
-                    </Menu.Items>
+                    </div>
                   )}
                 </div>
               ))}