Merge pull request #105 from newrelic/time-picker-fixes

fix: multiple issues with time ranges
newrelic · Sep 5, 2024 · 6b0eb21 · 6b0eb21
2 parents 5a17af4 + 9eb0765
commit 6b0eb21
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- TimeRangePicker - custom date/times get set to blank on closing custom section
+- TimePicker - changing start time does not update list of times in dropdown 
+
 ## [1.23.1] - 2024-07-31
 
 ### Fixed

diff --git a/src/components/time-picker/index.js b/src/components/time-picker/index.js
@@ -38,8 +38,10 @@ const TimePicker = ({ time, validFrom, validTill, onChange }) => {
   const [filter, setFilter] = useState('');
   const [times, setTimes] = useState([]);
 
-  const isValidTimeWrapper = (ts) =>
-    isValidTime(ts, validFrom, validTill, time);
+  const isValidTimeWrapper = useCallback(
+    (ts) => isValidTime(ts, validFrom, validTill, time),
+    [time, validFrom, validTill]
+  );
 
   useEffect(() => {
     if (!filter) {
@@ -81,7 +83,7 @@ const TimePicker = ({ time, validFrom, validTill, onChange }) => {
       }
       setTimes(matches);
     }
-  }, [filter]);
+  }, [filter, isValidTimeWrapper]);
 
   const clickHandler = useCallback(
     (e, t) => {

diff --git a/src/components/time-range-picker/index.js b/src/components/time-range-picker/index.js
@@ -154,16 +154,20 @@ const TimeRangePicker = ({
     setIsCustomOpen(false);
   };
 
-  const changeHandler = useCallback((_, o) => {
-    if (!o) {
-      setBeginTime(null);
-      setEndTime(null);
-      setIsCustomOpen(false);
-    }
-    setOpened(o);
-  }, []);
+  const changeHandler = useCallback(
+    (_, o) => {
+      if (!o && selected !== TEXTS.CUSTOM) {
+        setBeginTime(null);
+        setEndTime(null);
+        setIsCustomOpen(false);
+      }
+      setOpened(o);
+    },
+    [selected]
+  );
 
   const toggleCustomHandler = () => {
+    if (selected === TEXTS.CUSTOM && isCustomOpen) return;
     if (!isCustomOpen) {
       if (timeRange && timeRange['begin_time'] && timeRange['end_time']) {
         setBeginTime(timeRange['begin_time']);
@@ -189,6 +193,7 @@ const TimeRangePicker = ({
   }, [beginTime, endTime]);
 
   const cancelCustomHandler = useCallback((e) => {
+    e.preventDefault();
     e.stopPropagation();
     setIsCustomOpen(false);
   }, []);
@@ -285,6 +290,7 @@ const TimeRangePicker = ({
                     <Button
                       variant={Button.VARIANT.TERTIARY}
                       sizeType={Button.SIZE_TYPE.SMALL}
+                      disabled={selected === TEXTS.CUSTOM}
                       onClick={cancelCustomHandler}
                     >
                       {TEXTS.CANCEL}