From fd4890d7d04f2ef01b9be593dd1ce755c08e5693 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 4 Aug 2021 21:33:44 +0530
Subject: [PATCH] fix(ui) - dropdown search and other fixes

---
 .../Session_/PageInsightsPanel/PageInsightsPanel.tsx | 12 +++++++-----
 frontend/app/components/shared/DateRange.js          |  3 ++-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx b/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
index a46db53b1..48da47ad7 100644
--- a/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
+++ b/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
@@ -21,7 +21,8 @@ function PageInsightsPanel({ filters, fetchInsights, events = [], insights, urlO
   const [insightsFilters, setInsightsFilters] = useState(filters)
   
   const onDateChange = (e) => {
-    setInsightsFilters({ ...insightsFilters, startDate: e.startDate, endDate: e.endDate })
+    const { startDate, endDate, rangeValue } = e;
+    setInsightsFilters({ ...insightsFilters, startDate, endDate, rangeValue })
   }
 
   useEffect(() => {     
@@ -47,16 +48,17 @@ function PageInsightsPanel({ filters, fetchInsights, events = [], insights, urlO
     <div className="px-4 bg-gray-lightest">
       <div className="my-3 flex -ml-2">
         <DateRange
-          // rangeValue={filters.rangeValue}
-          startDate={filters.startDate}
-          endDate={filters.endDate}
+          rangeValue={insightsFilters.rangeValue}
+          startDate={insightsFilters.startDate}
+          endDate={insightsFilters.endDate}
           onDateChange={onDateChange}
-          customRangeRight
+          customHidden
         />
       </div>
       <div className="mb-4 flex items-center">
         <div className="mr-2 flex-shrink-0">In Page</div>
         <Dropdown
+          search
           labeled
           placeholder="change"
           selection
diff --git a/frontend/app/components/shared/DateRange.js b/frontend/app/components/shared/DateRange.js
index 7b627ab28..680a76b0f 100644
--- a/frontend/app/components/shared/DateRange.js
+++ b/frontend/app/components/shared/DateRange.js
@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import DateRangeDropdown from 'Shared/DateRangeDropdown';
 
 function DateRange (props) {
-  const { startDate, endDate, rangeValue, className, onDateChange, customRangeRight=false } = props;
+  const { startDate, endDate, rangeValue, className, onDateChange, customRangeRight=false, customHidden = false } = props;
   
   return (
     <DateRangeDropdown
@@ -13,6 +13,7 @@ function DateRange (props) {
       endDate={ endDate }
       className={ className }
       customRangeRight={customRangeRight}
+      customHidden={customHidden}
     />
   );  
 }