@abgov/jsonforms-components 2.70.2 → 2.70.4

package/index.esm.js

@@ -6,7 +6,7 @@ import axios from 'axios';
 import get$1 from 'lodash/get';
 import { toDataPath, INIT, UPDATE_CORE, isVisible, isEnabled, deriveLabelForUISchemaElement, rankWith, isStringControl, and, optionIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, uiTypeIs, isControl as isControl$1, isEnumControl, or, isOneOfEnumControl, isBooleanControl, createDefaultValue, Paths, Resolve, schemaTypeIs, formatIs, getAjv, schemaMatches, isObjectArrayControl, isPrimitiveArrayControl, composePaths, hasType, isCategorization, isLayout } from '@jsonforms/core';
 import * as _$c from 'lodash';
-import ___default, { isEmpty, isObject as isObject$i } from 'lodash';
+import ___default, { isEqual, isEmpty, isObject as isObject$i } from 'lodash';
 import { useJsonForms, withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, JsonFormsDispatch, withJsonFormsAllOfProps, withJsonFormsArrayLayoutProps, withJsonFormsLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
 import dompurify from 'dompurify';
 import * as xss from 'xss';
@@ -8007,7 +8007,13 @@ const USER_FIELD_DEFINITIONS = {
   }
 };
 const AUTO_POPULATE_ACTION_TYPES = new Set([INIT, UPDATE_CORE]);
-const isEmptyAutoPopulateTarget = value => value === undefined || value === null || value === '';
+// clean-code-ignore: RULE-19 — covered by ./autoPopulate.spec.tsx, colocated. The rule only looks
+// for a .test.ts sibling; adding one would duplicate the existing suite.
+// Only a value the user has never set is a populate target. An empty string is a real value here:
+// the text controls write '' when a field is cleared (see onChangeForInputControl), so treating it
+// as empty made auto-populate refill the field the instant it was emptied, and the user could
+// never clear it.
+const isEmptyAutoPopulateTarget = value => value === undefined || value === null;
 const shouldAutoPopulate = actionType => AUTO_POPULATE_ACTION_TYPES.has(actionType);
 const isAutoPopulateSource = value => typeof value === 'string' && AUTO_POPULATE_SOURCES.includes(value);
 const autoPopulateValue = (user, props) => {
@@ -8812,7 +8818,75 @@ const GoATextControl = props => jsx(GoAInputBaseControl, Object.assign({}, props
 const GoATextControlTester = rankWith(1, isStringControl);
 const GoAInputTextControl = withJsonFormsControlProps(GoATextControl);
 
-const DEBOUNCE_DELAY = 550;
+const COMMIT_DELAY = 300;
+/**
+ * Keeps a live, per-keystroke mirror of a control's value and pushes it into the form data only
+ * once the user pauses typing.
+ *
+ * The GoA web components keep the value in their own DOM and report changes back a macrotask
+ * late, while their update path writes an incoming `value` prop straight back into the field
+ * whenever it differs from what is in the box. So a render that commits a value older than what
+ * has been typed since wipes out the characters in between. Committing on every keystroke
+ * re-renders and revalidates the whole form, which makes that window wide enough to swallow
+ * characters; debouncing the commit keeps it to a single local render.
+ *
+ * The echo of our own commit is ignored while further edits are outstanding, so data arriving
+ * back from the form can never overwrite what the user has typed in the meantime.
+ *
+ * @param externalValue the value held in the form data; must be referentially stable between
+ *   renders (memoize it when it is an object), otherwise the sync effect runs on every render
+ * @param commit pushes a settled value into the form data
+ * @param delay how long to wait for typing to stop before committing
+ */
+function useDebouncedCommit(externalValue, commit, delay = COMMIT_DELAY) {
+  const [value, setLocalValue] = useState(externalValue);
+  // Set while the user has edits we have not pushed upstream yet.
+  const pendingRef = useRef(null);
+  const autoCommitRef = useRef(true);
+  const commitRef = useRef(commit);
+  useEffect(() => {
+    commitRef.current = commit;
+  });
+  const debouncedValue = useDebounce(value, delay);
+  const flush = useCallback(() => {
+    const pending = pendingRef.current;
+    if (pending === null) {
+      return;
+    }
+    pendingRef.current = null;
+    autoCommitRef.current = true;
+    commitRef.current(pending);
+  }, []);
+  const setValue = useCallback((next, options) => {
+    pendingRef.current = next;
+    autoCommitRef.current = (options == null ? void 0 : options.autoCommit) !== false;
+    setLocalValue(next);
+  }, []);
+  useEffect(() => {
+    if (!autoCommitRef.current) {
+      return;
+    }
+    // Only commit once the debounce has caught up with the latest keystroke.
+    if (pendingRef.current === null || pendingRef.current !== debouncedValue) {
+      return;
+    }
+    flush();
+  }, [debouncedValue, flush]);
+  useEffect(() => {
+    if (pendingRef.current !== null) {
+      return;
+    }
+    setLocalValue(current => isEqual(current, externalValue) ? current : externalValue);
+  }, [externalValue]);
+  // Don't drop the tail of what was typed when the control goes away, e.g. on stepper navigation.
+  useEffect(() => flush, [flush]);
+  return {
+    value,
+    setValue,
+    flush
+  };
+}
+
 const MultiLineText = props => {
   var _uischema$options$com, _uischema$options, _uischema$options2, _uischema$options3, _uischema$options$com2, _uischema$options4, _uischema$options5;
   const {
@@ -8828,29 +8902,29 @@ const MultiLineText = props => {
     errors,
     setIsVisited
   } = props;
-  const [textAreaValue, setTextAreaValue] = React.useState(data || '');
-  const debouncedValue = useDebounce(textAreaValue, DEBOUNCE_DELAY);
-  useEffect(() => {
-    setTextAreaValue(data || '');
-  }, [data]);
-  /* istanbul ignore next */
-  useEffect(() => {
-    if (debouncedValue !== data && (debouncedValue !== '' || data !== undefined)) {
-      onChangeForInputControl({
-        value: debouncedValue,
-        controlProps: props
-      });
-    }
-  }, [debouncedValue]);
+  const {
+    value: textAreaValue,
+    setValue: setTextAreaValue,
+    flush: flushTextArea
+  } = useDebouncedCommit(data || '', value => onChangeForInputControl({
+    value,
+    controlProps: props
+  }));
   const appliedUiSchemaOptions = Object.assign({}, config, uischema == null ? void 0 : uischema.options);
   const placeholder = (appliedUiSchemaOptions == null ? void 0 : appliedUiSchemaOptions.placeholder) || (schema == null ? void 0 : schema.description) || '';
   const width = (_uischema$options$com = uischema == null || (_uischema$options = uischema.options) == null || (_uischema$options = _uischema$options.componentProps) == null ? void 0 : _uischema$options.width) != null ? _uischema$options$com : '100%';
   const autoCapitalize = (uischema == null || (_uischema$options2 = uischema.options) == null || (_uischema$options2 = _uischema$options2.componentProps) == null ? void 0 : _uischema$options2.autoCapitalize) === true || (uischema == null || (_uischema$options3 = uischema.options) == null ? void 0 : _uischema$options3.autoCapitalize) === true;
   const readOnly = (_uischema$options$com2 = uischema == null || (_uischema$options4 = uischema.options) == null || (_uischema$options4 = _uischema$options4.componentProps) == null ? void 0 : _uischema$options4.readOnly) != null ? _uischema$options$com2 : false;
   const textAreaName = `${label || path}-text-area` || '';
+  const applyCapitalization = value => autoCapitalize ? value.toUpperCase() : value;
+  const markVisited = () => {
+    if (isVisited === false && setIsVisited) {
+      setIsVisited();
+    }
+  };
   const txtAreaComponent = jsx(GoabTextArea, Object.assign({
     error: isVisited && errors.length > 0,
-    value: debouncedValue,
+    value: textAreaValue,
     disabled: !enabled,
     readOnly: readOnly,
     placeholder: placeholder,
@@ -8859,21 +8933,21 @@ const MultiLineText = props => {
     width: width,
     // Note: Paul Jan-09-2023. The latest ui-component come with the maxCount. We need to uncomment the following line when the component is updated
     // maxCount={schema.maxLength || 256}
+    // The component raises _change from its input event, so unlike _keyPress (keyup) this also
+    // covers pasting, IME composition and held-key repeats.
+    onChange: detail => {
+      setTextAreaValue(applyCapitalization(detail.value));
+      markVisited();
+    },
     onKeyPress: detail => {
-      const newValue = autoCapitalize ? detail.value.toUpperCase() : detail.value;
-      setTextAreaValue(newValue);
-      if (isVisited === false && setIsVisited) {
-        setIsVisited();
-      }
+      setTextAreaValue(applyCapitalization(detail.value));
+      markVisited();
     },
     onBlur: detail => {
-      const newValue = autoCapitalize ? detail.value.toUpperCase() : detail.value;
-      setTextAreaValue(newValue);
-      if (isVisited === false && setIsVisited) {
-        setIsVisited();
-      }
-    },
-    onChange: detail => {}
+      setTextAreaValue(applyCapitalization(detail.value));
+      flushTextArea();
+      markVisited();
+    }
   }, uischema == null || (_uischema$options5 = uischema.options) == null ? void 0 : _uischema$options5.componentProps));
   return txtAreaComponent;
 };
@@ -18517,21 +18591,19 @@ const filterSuggestionsWithoutAddressCount = suggestions => {
   });
 };
 const mapSuggestionToAddress = suggestion => {
-  let addressLine1, addressLine2;
-  const suiteMatch = suggestion.Text.match(/(Suite|Apt|Unit|#)+/i);
-  const textParts = suggestion.Text.split(' ');
-  if (suiteMatch) {
-    addressLine1 = suggestion.Text.replace(textParts[0], '').trim();
-    addressLine2 = textParts[0].trim();
-  } else {
-    addressLine2 = '';
-    addressLine1 = suggestion.Text.trim();
-  }
-  const descriptionParts = suggestion.Description.split(',');
-  const municipality = descriptionParts[0].trim();
-  const provinceAndPostalCode = descriptionParts[1].trim().split(' ');
-  const subdivisionCode = provinceAndPostalCode[0];
-  const postalCode = descriptionParts[2].trim();
+  var _suggestion$Text$trim, _suggestion$Text, _suggestion$Descripti;
+  const text = (_suggestion$Text$trim = suggestion == null || (_suggestion$Text = suggestion.Text) == null ? void 0 : _suggestion$Text.trim()) != null ? _suggestion$Text$trim : '';
+  const textParts = text.split(' ');
+  const hasSuite = /(Suite|Apt|Unit|#)+/i.test(text) && textParts.length > 1;
+  const addressLine1 = hasSuite ? text.replace(textParts[0], '').trim() : text;
+  const addressLine2 = hasSuite ? textParts[0].trim() : '';
+  // Descriptions usually read "municipality, province, postalCode", but the lookup also returns
+  // "municipality, province postalCode" and, for partial matches, drops the postal code entirely.
+  // Reading the parts positionally used to throw on anything but the three part form.
+  const descriptionParts = ((_suggestion$Descripti = suggestion == null ? void 0 : suggestion.Description) != null ? _suggestion$Descripti : '').split(',').map(part => part.trim());
+  const [municipality = '', provinceAndPostalCode = '', trailingPostalCode = ''] = descriptionParts;
+  const [subdivisionCode = '', ...postalCodeParts] = provinceAndPostalCode.split(' ').filter(Boolean);
+  const postalCode = postalCodeParts.length > 0 ? postalCodeParts.join(' ') : trailingPostalCode;
   return {
     addressLine1,
     addressLine2,
@@ -18633,17 +18705,18 @@ const AddressLookUpControl = props => {
   const [open, setOpen] = useState(false);
   const addressContainerRef = useRef(null);
   const label = typeof (uischema == null ? void 0 : uischema.label) === 'string' && uischema.label ? uischema.label : '';
-  const [address, setAddress] = useState(normalizeAddressData(data, isAlbertaAddress));
+  const normalizedData = useMemo(() => normalizeAddressData(data, isAlbertaAddress), [data, isAlbertaAddress]);
+  const {
+    value: address,
+    setValue: setAddress,
+    flush: flushAddress
+  } = useDebouncedCommit(normalizedData, updatedAddress => handleChange(path, updatedAddress));
   const [searchTerm, setSearchTerm] = useState('');
   const [suggestions, setSuggestions] = useState([]);
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState({});
   const requiredFields = schema.required;
   const [dropdownSelected, setDropdownSelected] = useState(false);
-  const updateFormData = updatedAddress => {
-    handleChange(path, updatedAddress);
-  };
-  const debouncedRenderAddress = useDebounce(searchTerm, 500);
   const [activeIndex, setActiveIndex] = useState(0);
   const dropdownRef = useRef(null);
   const debouncedTerm = useDebounce(searchTerm, 500);
@@ -18651,39 +18724,35 @@ const AddressLookUpControl = props => {
   const lastQueryRef = useRef('');
   const cacheRef = useRef(new Map());
   const spinnerTimerRef = useRef(null);
-  useEffect(() => {
-    const nextAddress = normalizeAddressData(data, isAlbertaAddress);
-    setAddress(currentAddress => {
-      const keys = ['addressLine1', 'addressLine2', 'municipality', 'postalCode', 'country', 'subdivisionCode'];
-      const unchanged = keys.every(key => currentAddress[key] === nextAddress[key]);
-      return unchanged ? currentAddress : nextAddress;
-    });
-  }, [data, isAlbertaAddress]);
-  const handleInputChange = (field, value) => {
+  const handleInputChange = (field, value, options) => {
     var _schema$errorMessage;
-    if (field === 'addressLine1') {
-      setDropdownSelected(false);
-    }
-    let newAddress;
+    let newValue = value;
     const postalCodeErrorMessage = (_schema$errorMessage = schema.errorMessage) == null || (_schema$errorMessage = _schema$errorMessage.properties) == null ? void 0 : _schema$errorMessage.postalCode;
     if (field === 'postalCode') {
       const validatePc = validatePostalCode(value);
-      setErrors(handlePostalCodeValidation(validatePc, postalCodeErrorMessage ? postalCodeErrorMessage : '', value, errors));
-      value = formatPostalCode(value);
-      newAddress = Object.assign({}, address, {
-        [field]: value.toUpperCase()
-      });
+      setErrors(currentErrors => handlePostalCodeValidation(validatePc, postalCodeErrorMessage != null ? postalCodeErrorMessage : '', value, currentErrors));
+      newValue = formatPostalCode(value).toUpperCase();
     } else {
-      newAddress = Object.assign({}, address, {
-        [field]: value
+      setErrors(currentErrors => {
+        if (!(field in currentErrors)) {
+          return currentErrors;
+        }
+        const nextErrors = Object.assign({}, currentErrors);
+        delete nextErrors[field];
+        return nextErrors;
       });
-      delete errors[field];
     }
-    if (value === '' && field in newAddress) {
+    const newAddress = Object.assign({}, address, {
+      [field]: newValue
+    });
+    if (newValue === '') {
       delete newAddress[field];
     }
-    setAddress(newAddress);
-    updateFormData(newAddress);
+    setAddress(newAddress, options);
+    // Picking a province isn't typing, so there is nothing to wait for.
+    if (field === 'subdivisionCode') {
+      flushAddress();
+    }
   };
   const renderHelp = () => {
     return jsx(HelpContentComponent, Object.assign({}, props, {
@@ -18691,70 +18760,46 @@ const AddressLookUpControl = props => {
       showLabel: false
     }));
   };
-  useEffect(() => {
-    const fetchSuggestions = async () => {
-      /* istanbul ignore next */
-      if (debouncedRenderAddress.length > 2 && dropdownSelected === false) {
-        setLoading(true);
-        setOpen(true);
-        try {
-          await fetchAddressSuggestions(formUrl, formatPostalCodeIfNeeded(searchTerm), isAlbertaAddress).then(response => {
-            const suggestions = filterSuggestionsWithoutAddressCount(response);
-            if (isAlbertaAddress) {
-              setSuggestions(filterAlbertaAddresses(suggestions));
-            } else {
-              setSuggestions(suggestions);
-            }
-            setLoading(false);
-          });
-          // eslint-disable-next-line
-        } catch (error) {
-          if (error.name !== 'AbortError') {
-            console.error('Address fetch failed:', error);
-          }
-        } finally {
-          setLoading(false);
-        }
-      } else {
-        setSuggestions([]);
-        setOpen(false);
-      }
-    };
-    fetchSuggestions();
-  }, [debouncedTerm]); // eslint-disable-line react-hooks/exhaustive-deps
-  const handleDropdownChange = value => {
+  const handleAddressLine1Change = value => {
     setDropdownSelected(false);
     setSearchTerm(value);
+    // Mirror the keystroke so the field never renders a stale value, but leave the form data alone
+    // until blur or a suggestion is picked. Committing mid-lookup re-renders the whole form while
+    // the search is still debouncing, which is what closed the suggestions dropdown.
+    handleInputChange('addressLine1', value, {
+      autoCommit: false
+    });
   };
   /* istanbul ignore next */
   const handleSuggestionClick = suggestion => {
     const suggestAddress = mapSuggestionToAddress(suggestion);
     setAddress(suggestAddress);
-    handleChange(path, suggestAddress);
+    flushAddress();
     setSuggestions([]);
     setErrors({});
     setDropdownSelected(true);
   };
   const handleRequiredFieldBlur = (name, value) => {
-    var _ref, _ref2, _ref3, _addressContainerRef$;
-    const err = Object.assign({}, errors);
-    const addressValue = name in address ? address[name] : undefined;
-    const liveInputValue = (_ref = (_ref2 = (_ref3 = value != null ? value : (_addressContainerRef$ = addressContainerRef.current) == null || (_addressContainerRef$ = _addressContainerRef$.querySelector(`goa-input[name="${name}"]`)) == null ? void 0 : _addressContainerRef$.value) != null ? _ref3 : addressValue) != null ? _ref2 : data == null ? void 0 : data[name]) != null ? _ref : '';
-    if (liveInputValue.trim() === '') {
-      err[name] = `${getAddressLookupFieldLabel(name)} is required`;
-    } else {
-      delete err[name];
-    }
-    setErrors(err);
+    var _ref, _ref2;
+    const liveInputValue = (_ref = (_ref2 = value != null ? value : address[name]) != null ? _ref2 : data == null ? void 0 : data[name]) != null ? _ref : '';
+    setErrors(currentErrors => {
+      const nextErrors = Object.assign({}, currentErrors);
+      if (liveInputValue.trim() === '') {
+        nextErrors[name] = `${getAddressLookupFieldLabel(name)} is required`;
+      } else {
+        delete nextErrors[name];
+      }
+      return nextErrors;
+    });
     setSuggestions([]);
     setOpen(false);
     if (name === 'addressLine1' && value !== undefined) {
-      const newAddress = Object.assign({}, address, {
+      setAddress(Object.assign({}, address, {
         addressLine1: value
-      });
-      setAddress(newAddress);
-      updateFormData(newAddress);
+      }));
     }
+    // Leaving the field ends the burst of typing, so push what is there now.
+    flushAddress();
   };
   useEffect(() => {
     if (dropdownRef.current && activeIndex !== -1) {
@@ -18883,12 +18928,14 @@ const AddressLookUpControl = props => {
               ariaLabel: 'address-form-address1',
               placeholder: "Start typing the first line of your address, required.",
               value: (address == null ? void 0 : address.addressLine1) || '',
-              onChange: detail => handleDropdownChange(detail.value),
+              onChange: detail => handleAddressLine1Change(detail.value),
               onBlur: detail => handleRequiredFieldBlur(detail.name, detail.value),
               width: "100%",
               onKeyPress: detail => {
                 if (open) {
-                  const newIndex = handleAddressKeyDown(detail.key, detail.value, activeIndex, suggestions, val => handleInputChange('addressLine1', val), suggestion => handleSuggestionClick(suggestion));
+                  const newIndex = handleAddressKeyDown(detail.key, detail.value, activeIndex, suggestions,
+                  // Navigating the suggestions must never blank out what has been typed.
+                  val => typeof val === 'string' && handleInputChange('addressLine1', val), suggestion => handleSuggestionClick(suggestion));
                   setActiveIndex(newIndex);
                 }
               }
@@ -18941,7 +18988,8 @@ const NameInputs = ({
   requiredFields,
   disabled,
   errors,
-  onFieldBlur
+  onFieldBlur,
+  onFieldCommit
 }) => {
   var _displayedErrors$firs, _displayedErrors$last;
   const [internalErrors, setInternalErrors] = useState({});
@@ -18995,6 +19043,7 @@ const NameInputs = ({
   };
   const displayedErrors = errors != null ? errors : internalErrors;
   const handleBlur = name => {
+    onFieldCommit == null || onFieldCommit();
     if (onFieldBlur) {
       onFieldBlur(name);
     } else {
@@ -19041,6 +19090,7 @@ const NameInputs = ({
           ariaLabel: 'name-form-middle-name',
           value: middleName || '',
           onChange: detail => handleInputChange(detail.name, detail.value),
+          onBlur: () => onFieldCommit == null ? void 0 : onFieldCommit(),
           width: "100%"
         })
       }), jsx(GoabFormItem, {
@@ -19131,24 +19181,19 @@ const FullNameControl = props => {
     uischema
   } = props;
   const requiredFields = schema.required;
-  const [nameData, setNameData] = useState(normalizeNameData(data));
   const controlRef = useRef(null);
   const formStepperCtx = useContext(JsonFormsStepperContext);
   const stepperState = formStepperCtx == null || formStepperCtx.selectStepperState == null ? void 0 : formStepperCtx.selectStepperState();
-  const updateFormData = updatedData => {
-    updatedData = Object.fromEntries(Object.entries(updatedData).filter(([_, value]) => value !== ''));
-    handleChange(path, updatedData);
-  };
-  useEffect(() => {
-    const nextData = normalizeNameData(data);
-    setNameData(currentData => currentData.firstName === nextData.firstName && currentData.middleName === nextData.middleName && currentData.lastName === nextData.lastName ? currentData : nextData);
-  }, [data]);
+  const normalizedData = useMemo(() => normalizeNameData(data), [data]);
+  const {
+    value: nameData,
+    setValue: setNameData,
+    flush: flushName
+  } = useDebouncedCommit(normalizedData, updatedData => handleChange(path, Object.fromEntries(Object.entries(updatedData).filter(([, value]) => value !== ''))));
   const handleInputChange = (field, value) => {
-    const updatedName = Object.assign({}, nameData, {
+    setNameData(Object.assign({}, nameData, {
       [field]: value
-    });
-    setNameData(updatedName);
-    updateFormData(updatedName);
+    }));
   };
   /* istanbul ignore next */
   useEffect(() => {
@@ -19191,7 +19236,8 @@ const FullNameControl = props => {
         handleInputChange: handleInputChange,
         data: data,
         disabled: !enabled,
-        requiredFields: requiredFields
+        requiredFields: requiredFields,
+        onFieldCommit: flushName
       })
     })
   });
@@ -19264,21 +19310,20 @@ const FullNameDobControl = props => {
       maxDate: currentDate.toISOString().substring(0, 10)
     };
   };
-  const [formData, setFormData] = useState(normalizeNameDobData(data));
+  const normalizedData = useMemo(() => normalizeNameDobData(data), [data]);
+  const {
+    value: formData,
+    setValue: setFormData,
+    flush: flushFormData
+  } = useDebouncedCommit(normalizedData, updatedData => handleChange(path, Object.fromEntries(Object.entries(updatedData).filter(([, value]) => value !== ''))));
   const updateFormData = updatedData => {
-    const nextData = Object.fromEntries(Object.entries(updatedData).filter(([_, value]) => value !== ''));
-    setFormData(nextData);
-    handleChange(path, nextData);
+    setFormData(updatedData);
+    flushFormData();
   };
-  useEffect(() => {
-    const nextData = normalizeNameDobData(data);
-    setFormData(currentData => currentData.firstName === nextData.firstName && currentData.middleName === nextData.middleName && currentData.lastName === nextData.lastName && currentData.dateOfBirth === nextData.dateOfBirth ? currentData : nextData);
-  }, [data]);
   const handleInputChange = (field, value) => {
-    const updatedData = Object.assign({}, formData, {
+    setFormData(Object.assign({}, formData, {
       [field]: value
-    });
-    updateFormData(updatedData);
+    }));
   };
   // eslint-disable-next-line
   const handleRequiredFieldBlur = (name, updatedData) => {
@@ -19342,7 +19387,8 @@ const FullNameDobControl = props => {
         disabled: !enabled,
         requiredFields: requiredFields,
         errors: errors,
-        onFieldBlur: handleRequiredFieldBlur
+        onFieldBlur: handleRequiredFieldBlur,
+        onFieldCommit: flushFormData
       }), jsx(GoabGrid, {
         minChildWidth: "0ch",
         gap: "s",
@@ -19363,7 +19409,7 @@ const FullNameDobControl = props => {
             value: formData == null ? void 0 : formData.dateOfBirth,
             onChange: detail => handleInputChange(detail.name, detail.value),
             onBlur: detail => {
-              /* istanbul ignore next */
+              flushFormData();
               handleRequiredFieldBlur(detail.name);
             },
             width: "100%"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.70.2",
+  "version": "2.70.4",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/renderer-catalog.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-07-27T16:49:26.205Z",
-  "sourceCommit": "691dde2da272c7fc91ab319fa14ffa66ebafab47",
+  "generatedAt": "2026-07-31T19:55:33.198Z",
+  "sourceCommit": "ef8ca17fd76dacfba02abd9bb758c3be5c38e9ae",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 33,
   "renderers": [

package/src/lib/Controls/FullName/FullNameInputs.d.ts

@@ -9,6 +9,8 @@ interface NameInputsProps {
     requiredFields?: string[];
     errors?: Record<string, string>;
     onFieldBlur?: (name: string) => void;
+    /** Called whenever a field loses focus, so the owner can push pending edits without waiting out the debounce. */
+    onFieldCommit?: () => void;
     handleInputChange: (field: string, value: string) => void;
 }
 export declare const NameInputs: React.FC<NameInputsProps>;

package/src/lib/util/useDebouncedCommit.d.ts

@@ -0,0 +1,37 @@
+export declare const COMMIT_DELAY = 300;
+export interface SetValueOptions {
+    /**
+     * Whether the edit should be pushed upstream once typing stops. Pass false for a field whose
+     * owner commits on its own schedule; the value is still mirrored and still protected from
+     * incoming data until something calls flush.
+     */
+    autoCommit?: boolean;
+}
+export interface DebouncedCommit<T> {
+    /** The live value to bind to the input; updated on every keystroke. */
+    value: T;
+    /** Records a keystroke and, unless told otherwise, schedules the commit. */
+    setValue: (next: T, options?: SetValueOptions) => void;
+    /** Commits straight away, for events that are not typing (blur, selecting a suggestion, unmount). */
+    flush: () => void;
+}
+/**
+ * Keeps a live, per-keystroke mirror of a control's value and pushes it into the form data only
+ * once the user pauses typing.
+ *
+ * The GoA web components keep the value in their own DOM and report changes back a macrotask
+ * late, while their update path writes an incoming `value` prop straight back into the field
+ * whenever it differs from what is in the box. So a render that commits a value older than what
+ * has been typed since wipes out the characters in between. Committing on every keystroke
+ * re-renders and revalidates the whole form, which makes that window wide enough to swallow
+ * characters; debouncing the commit keeps it to a single local render.
+ *
+ * The echo of our own commit is ignored while further edits are outstanding, so data arriving
+ * back from the form can never overwrite what the user has typed in the meantime.
+ *
+ * @param externalValue the value held in the form data; must be referentially stable between
+ *   renders (memoize it when it is an object), otherwise the sync effect runs on every render
+ * @param commit pushes a settled value into the form data
+ * @param delay how long to wait for typing to stop before committing
+ */
+export declare function useDebouncedCommit<T>(externalValue: T, commit: (value: T) => void, delay?: number): DebouncedCommit<T>;