Reset TimeSlotSelector value when changes

coopcycle · Jun 19, 2024 · b276b20 · b276b20
1 parent 0f46e67
commit b276b20
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/navigation/store/NewDeliveryForm.js b/src/navigation/store/NewDeliveryForm.js
@@ -30,6 +30,7 @@ function NewDelivery(props) {
   const backgroundContainerColor = useBackgroundContainerColor();
   const backgroundColor = useBackgroundColor();
   const backgroundHighlightColor = useBackgroundHighlightColor();
+  const [selectValue, setSelectValue] = React.useState(null);
 
   const inputStyles = {
     backgroundColor: backgroundContainerColor,
@@ -66,6 +67,8 @@ function NewDelivery(props) {
       props.loadTimeSlotChoices(
         props.timeSlots.find(ts => ts.name === selectedTimeSlot),
       );
+    } else {
+      setSelectValue(null);
     }
   }, [selectedTimeSlot, props.loadTimeSlotChoices, props.timeSlots]);
 
@@ -309,6 +312,8 @@ function NewDelivery(props) {
             </View>
             {props.hasTimeSlot && (
               <TimeSlotSelector
+                selectValue={selectValue}
+                setSelectValue={setSelectValue}
                 errors={errors}
                 touched={touched}
                 setFieldValue={setFieldValue}

diff --git a/src/navigation/store/components/TimeSlotSelector.js b/src/navigation/store/components/TimeSlotSelector.js
@@ -63,6 +63,8 @@ export default function TimeSlotSelector({
   timeSlots,
   choices,
   selectedTimeSlot,
+  selectValue,
+  setSelectValue,
 }) {
   const { t } = useTranslation();
   const primaryColor = usePrimaryColor();
@@ -132,6 +134,7 @@ export default function TimeSlotSelector({
           if (!value) return;
           setFieldValue('timeSlot', value.key);
           setFieldTouched('timeSlot');
+          setSelectValue(value);
         }}
         items={choices.map(
           choice => (choice = { value: choice.value, label: choice.label }),
@@ -140,6 +143,7 @@ export default function TimeSlotSelector({
           label: t('STORE_NEW_DELIVERY_SELECT_TIME_SLOT'),
           value: null,
         }}
+        value={selectValue}
       />
       {errors.timeSlot && touched.timeSlot && (
         <Text note style={styles.errorText}>