From cbeb604c27bbf45957d244581768d2f49cf66eb3 Mon Sep 17 00:00:00 2001
From: dan13ram <dan13ram@gmail.com>
Date: Tue, 13 Jul 2021 19:57:40 +0530
Subject: [PATCH] fixed filters not working with touch handlers

---
 .../design-system/src/MetaFilterSelect.tsx    | 52 ++++++++++++-------
 .../Player/Filter/DesktopFilters.tsx          |  2 +-
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/packages/design-system/src/MetaFilterSelect.tsx b/packages/design-system/src/MetaFilterSelect.tsx
index 9b8301c3..46e9358e 100644
--- a/packages/design-system/src/MetaFilterSelect.tsx
+++ b/packages/design-system/src/MetaFilterSelect.tsx
@@ -10,7 +10,7 @@ import {
   Text,
   useBreakpointValue,
 } from '@chakra-ui/react';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 
 import { DropDownIcon } from './icons/DropDownIcon';
 import { MetaTag } from './MetaTag';
@@ -175,11 +175,26 @@ const SelectControl: React.FC<
 > = (props) => {
   const {
     hasValue,
-    selectProps: { menuIsOpen, onMenuClose, onMenuOpen },
+    selectProps: { menuIsOpen, onMenuClose, onMenuOpen, showSearch },
   } = props;
 
   const buttonRef = useRef<HTMLButtonElement>(null);
 
+  const onClick = useCallback(() => {
+    if (menuIsOpen) {
+      if (onMenuClose) {
+        onMenuClose();
+      }
+    } else {
+      if (onMenuOpen) {
+        onMenuOpen();
+      }
+      if (!showSearch && buttonRef.current) {
+        buttonRef.current.focus();
+      }
+    }
+  }, [menuIsOpen, onMenuOpen, onMenuClose, showSearch]);
+
   return (
     <Button
       fontWeight="normal"
@@ -187,8 +202,8 @@ const SelectControl: React.FC<
       boxShadow={menuIsOpen ? '0px 10px 20px rgba(0, 0, 0, 0.4)' : 'none'}
       cursor="pointer"
       ref={buttonRef}
-      onClick={menuIsOpen ? onMenuClose : onMenuOpen}
-      onMouseDown={() => (menuIsOpen ? undefined : buttonRef.current?.focus())}
+      onClick={onClick}
+      onTouchEnd={onClick}
       align="center"
       borderTopRadius="4px"
       borderBottomRadius={menuIsOpen ? '0' : '4px'}
@@ -319,26 +334,25 @@ const SelectContainer: React.FC<
   React.ComponentProps<typeof SelectComponents.SelectContainer>
 > = (props) => {
   const {
-    selectProps: { menuIsOpen, onMenuClose },
+    selectProps: { onMenuClose },
   } = props;
-  const selectRef = useRef<HTMLDivElement>(null);
 
-  const onOutsideFocus = useCallback(() => {
-    if (onMenuClose && menuIsOpen) {
-      onMenuClose();
-    }
-  }, [menuIsOpen, onMenuClose]);
+  // const onOutsideFocus = useCallback(() => {
+  //   if (onMenuClose && menuIsOpen) {
+  //     onMenuClose();
+  //   }
+  // }, [menuIsOpen, onMenuClose]);
 
-  useEffect(() => {
-    const selectedRef = selectRef.current;
-    selectedRef?.addEventListener('focusout', onOutsideFocus);
-    return () => {
-      selectedRef?.removeEventListener('focusout', onOutsideFocus);
-    };
-  }, [selectRef, onOutsideFocus]);
+  // useEffect(() => {
+  //   const selectedRef = selectRef.current;
+  //   selectedRef?.addEventListener('focusout', onOutsideFocus);
+  //   return () => {
+  //     selectedRef?.removeEventListener('focusout', onOutsideFocus);
+  //   };
+  // }, [selectRef, onOutsideFocus]);
 
   return (
-    <Flex ref={selectRef} position="relative">
+    <Flex position="relative" onBlur={onMenuClose}>
       <SelectComponents.SelectContainer
         {...props}
         innerProps={{ onKeyDown: () => undefined }}
diff --git a/packages/web/components/Player/Filter/DesktopFilters.tsx b/packages/web/components/Player/Filter/DesktopFilters.tsx
index 3f8deafd..6b7dbe5f 100644
--- a/packages/web/components/Player/Filter/DesktopFilters.tsx
+++ b/packages/web/components/Player/Filter/DesktopFilters.tsx
@@ -133,7 +133,7 @@ export const DesktopFilters: React.FC<Props> = ({
         <MetaFilterSelectSearch
           title="Availability"
           styles={styles}
-          value={availability}
+          value={availability ? [availability] : []}
           onChange={(value) => {
             const values = value as ValueType[];
             setAvailability(values[values.length - 1]);