How can I reset a time picker modal to use it multiple times?

[gboudreau]

Say I have a <TimePickerModal />, and I want to use it to pick multiple times (eg a start and end time).
How can I reset the time picker state, after it has been used once?
Without being able to reset, the second time I'll try to use the picker, it will default to the previously picked time, instead of the default time, and most importantly, the minutes field will have the focus, instead of the hours field being focused, like it is the case on first use.

Even if I use it for a single time selection, it's weird that if the user wants to change his selection, the focus is on the minutes field, the second time he opens the modal.

Thanks.

[gboudreau]

Answering my question: for the time, looking at the code, I saw that if the minutes and hours properties of the element change, the internal states for those are also updated. So I created states to track the values I want to use in the modal for both minutes and hours, and I simply set them before opening the modal:

  const [timePickerHours, setTimePickerHours] = useState<number>();
  const [timePickerMinutes, setTimePickerMinutes] = useState<number>();

  const selectTime = (hours, minutes) => {
    setTimePickerHours(Number(hours));
    setTimePickerMinutes(Number(minutes));
    setTimePickerVisible(true);
  };

  return (
      <TimePickerModal
        hours={timePickerHours}
        minutes={timePickerMinutes}
        visible={timePickerVisible}
      />
  );

For the focus, I added a new property in TimePickerModal, that do what I want:

diff --git a/node_modules/react-native-paper-dates/src/Time/TimePickerModal.tsx b/node_modules/react-native-paper-dates/src/Time/TimePickerModal.tsx
index fa4074e..82950bb 100644
--- a/node_modules/react-native-paper-dates/src/Time/TimePickerModal.tsx
+++ b/node_modules/react-native-paper-dates/src/Time/TimePickerModal.tsx
@@ -47,6 +47,7 @@ export function TimePickerModal({
   use24HourClock,
   inputFontSize,
   defaultInputType,
+  resetFocusOnClose,
 }: {
   locale?: undefined | string
   label?: string
@@ -64,6 +65,7 @@ export function TimePickerModal({
   use24HourClock?: boolean
   inputFontSize?: number
   defaultInputType?: PossibleInputTypes
+  resetFocusOnClose?: boolean
 }) {
   const theme = useTheme()
 
@@ -74,6 +76,13 @@ export function TimePickerModal({
   const [localHours, setLocalHours] = useState(getHours(hours))
   const [localMinutes, setLocalMinutes] = useState(getMinutes(minutes))
 
+  // When resetFocusOnClose, reset the focus (back to the default - the hours field) when the modal is closed (visible=false)
+  useEffect(() => {
+    if (!visible && resetFocusOnClose) {
+      setFocused(clockTypes.hours);
+    }
+  }, [resetFocusOnClose, visible]);
+
   useEffect(() => {
     setLocalHours(getHours(hours))
   }, [setLocalHours, hours])

If you'd be interested in merging this, I can submit it as a PR. Let me know.