fix: autocomplete community source widget

bcgov · Sep 27, 2024 · 2c52d17 · 2c52d17
1 parent b3362c1
commit 2c52d17
Showing 1 changed file with 55 additions and 34 deletions.
diff --git a/app/lib/theme/widgets/custom/CommunitySourceWidget.tsx b/app/lib/theme/widgets/custom/CommunitySourceWidget.tsx
@@ -43,6 +43,9 @@ const CommunitySourceWidget: React.FC<CommunitySourceWidgetProps> = (props) => {
     value: geographicNameId,
     label: bcGeographicName,
   });
+  const [economicRegionInputValue, setEconomicRegionInputValue] = useState('');
+  const [regionalDistrictInputValue, setRegionalDistrictValue] = useState('');
+  const [geographicNameInputValue, setGeographicNameInputValue] = useState('');
 
   useEffect(() => {
     setSelectedEconomicRegion(economicRegion);
@@ -103,25 +106,57 @@ const CommunitySourceWidget: React.FC<CommunitySourceWidgetProps> = (props) => {
     return [];
   };
 
+  const onEconomicRegionChange = (e, val, reason?) => {
+    if (reason === 'clear') {
+      clearWidget();
+    }
+    if (e) {
+      setSelectedRegionalDistrict(null);
+      setSelectedGeographicName({ value: null, label: '' });
+      setSelectedEconomicRegion(val);
+    }
+  };
+
+  const onRegionalDistrictChange = (e, val, reason?) => {
+    if (reason === 'clear') {
+      setSelectedRegionalDistrict('');
+      setSelectedGeographicName({ value: null, label: '' });
+    }
+    if (e) {
+      setSelectedRegionalDistrict(val);
+    }
+  };
+
+  const onGeographicNameChange = (e, val, reason?) => {
+    if (reason === 'clear') {
+      setSelectedGeographicName({ value: null, label: '' });
+      return;
+    }
+    if (e) {
+      setSelectedGeographicName(val);
+      onChange({
+        bcGeographicName: val?.label,
+        economicRegion: selectedEconomicRegion,
+        regionalDistrict: selectedRegionalDistrict,
+        geographicNameId: val?.value,
+      });
+    }
+  };
+
   return (
     <StyledDiv>
       <Autocomplete
         readOnly={!!rowId}
         key={`economic-region-${rowId}`}
         data-testid="economic-region-autocomplete"
-        onChange={(e, val, reason) => {
-          if (reason === 'clear') {
-            clearWidget();
-          }
-          if (e) {
-            setSelectedRegionalDistrict(null);
-            setSelectedGeographicName({ value: null, label: '' });
-            setSelectedEconomicRegion(val);
-          }
+        onChange={onEconomicRegionChange}
+        onInputChange={(e, val) => {
+          onEconomicRegionChange(e, null);
+          setEconomicRegionInputValue(val);
         }}
         style={{ width: '200px' }}
         value={selectedEconomicRegion}
-        inputValue={selectedEconomicRegion ?? ''}
+        inputValue={economicRegionInputValue}
         options={economicRegionOptions}
         getOptionLabel={(option) => option}
         renderInput={(params) => (
@@ -138,17 +173,13 @@ const CommunitySourceWidget: React.FC<CommunitySourceWidgetProps> = (props) => {
         key={`regional-district-${rowId}`}
         data-testid="regional-district-autocomplete"
         style={{ width: '200px' }}
-        onChange={(e, val, reason) => {
-          if (reason === 'clear') {
-            setSelectedRegionalDistrict('');
-            setSelectedGeographicName({ value: null, label: '' });
-          }
-          if (e) {
-            setSelectedRegionalDistrict(val);
-          }
+        onChange={onRegionalDistrictChange}
+        onInputChange={(e, val) => {
+          onRegionalDistrictChange(e, null);
+          setRegionalDistrictValue(val);
         }}
         value={selectedRegionalDistrict}
-        inputValue={selectedRegionalDistrict ?? ''}
+        inputValue={regionalDistrictInputValue}
         options={
           regionalDistrictOptions[selectedEconomicRegion]
             ? [...regionalDistrictOptions[selectedEconomicRegion]]
@@ -189,21 +220,11 @@ const CommunitySourceWidget: React.FC<CommunitySourceWidgetProps> = (props) => {
           return option.label ?? '';
         }}
         value={selectedGeographicName}
-        inputValue={selectedGeographicName?.label ?? ''}
-        onChange={(e, val, reason) => {
-          if (reason === 'clear') {
-            setSelectedGeographicName({ value: null, label: '' });
-            return;
-          }
-          if (e) {
-            setSelectedGeographicName(val);
-            onChange({
-              bcGeographicName: val.label,
-              economicRegion: selectedEconomicRegion,
-              regionalDistrict: selectedRegionalDistrict,
-              geographicNameId: val.value,
-            });
-          }
+        inputValue={geographicNameInputValue}
+        onChange={onGeographicNameChange}
+        onInputChange={(e, val) => {
+          onGeographicNameChange(e, null);
+          setGeographicNameInputValue(val);
         }}
       />
       {!rowId && (