diff --git a/src/applications/caregivers/components/FormDescriptions/AddressCountyDescriptions.jsx b/src/applications/caregivers/components/FormDescriptions/AddressCountyDescriptions.jsx index 76789be5d523..468dbad92bff 100644 --- a/src/applications/caregivers/components/FormDescriptions/AddressCountyDescriptions.jsx +++ b/src/applications/caregivers/components/FormDescriptions/AddressCountyDescriptions.jsx @@ -4,6 +4,7 @@ export const CaregiverCountyDescription = () => ( event.stopPropagation()} >

Providing the county helps the Caregiver Support Team connect caregivers diff --git a/src/applications/caregivers/components/FormFields/AddressWithAutofill.jsx b/src/applications/caregivers/components/FormFields/AddressWithAutofill.jsx index 08618b8fcf50..75634479a6e0 100644 --- a/src/applications/caregivers/components/FormFields/AddressWithAutofill.jsx +++ b/src/applications/caregivers/components/FormFields/AddressWithAutofill.jsx @@ -66,6 +66,17 @@ const PrimaryAddressWithAutofill = props => { [addDirtyField, formData, onChange, veteranAddress], ); + const updateAllFormDataForAutocomplete = useCallback( + () => { + [...REQUIRED_ADDRESS_FIELDS, 'street2'].forEach(field => { + const fieldName = `root_${props.name}_${field}`; + const { value } = document.getElementById(fieldName); + formData[field] = value; + }); + }, + [formData, props.name], + ); + // define our non-checkbox input change event const handleChange = useCallback( event => { @@ -74,18 +85,24 @@ const PrimaryAddressWithAutofill = props => { // uncheck autofill since we have modified the input value if (formData['view:autofill']) formData['view:autofill'] = false; // send updated date to the form + updateAllFormDataForAutocomplete(); onChange(formData); }, - [formData, onChange], + [formData, onChange, updateAllFormDataForAutocomplete], ); // define our non-checkbox input blur event const handleBlur = useCallback( event => { - const fieldName = event.target.name.split('_').pop(); + const { name } = event.target; + const fieldName = name.split('_').pop(); addDirtyField(fieldName); + // make sure that formData has all field values + // browser autocomplete does not consistently trigger input/change events + updateAllFormDataForAutocomplete(); + onChange(formData); }, - [addDirtyField], + [addDirtyField, formData, onChange, updateAllFormDataForAutocomplete], ); // check for validation errors if field is dirty or form has been submitted @@ -106,7 +123,6 @@ const PrimaryAddressWithAutofill = props => { } return null; }; - return reviewMode ? ( { onInput={handleChange} onBlur={handleBlur} required + autocomplete="address-line1" /> { className="cg-address-input" onInput={handleChange} onBlur={handleBlur} + autocomplete="address-line2" /> { onInput={handleChange} onBlur={handleBlur} required + autocomplete="address-level2" /> { onVaSelect={handleChange} onBlur={handleBlur} required + autocomplete="address-level1" > {states.USA.map(state => (

+ +
, + ); + const selector = container.querySelector('va-additional-info'); + const blurEvent = new Event('blur'); + + fireEvent.blur(selector, blurEvent); + + expect(externalBlur.notCalled).to.be.true; + }); }); describe('CG ', () => { - it('should render `va-additional-info` component with neccessary attribute(s)', () => { + it('should render `va-additional-info` component with necessary attribute(s)', () => { const { container } = render(); const selector = container.querySelector('va-additional-info'); expect(selector).to.exist; diff --git a/src/applications/caregivers/tests/unit/components/FormFields/AddressWithAutofill.unit.spec.js b/src/applications/caregivers/tests/unit/components/FormFields/AddressWithAutofill.unit.spec.js index 4d7579adeb74..c7aa770ea0b1 100644 --- a/src/applications/caregivers/tests/unit/components/FormFields/AddressWithAutofill.unit.spec.js +++ b/src/applications/caregivers/tests/unit/components/FormFields/AddressWithAutofill.unit.spec.js @@ -27,6 +27,7 @@ describe('CG ', () => { state: 'DC', postalCode: '20005', 'view:autofill': autofill, + county: undefined, }, errorSchema: { city: errorSchemas.required, @@ -49,6 +50,7 @@ describe('CG ', () => { }, schema: addressWithAutofillSchema(address), onChange: sinon.spy(), + name: 'caregiverAddress', }, mockStore: { getState: () => ({ @@ -81,6 +83,7 @@ describe('CG ', () => { reviewRow: container.querySelectorAll('.review-row'), vaCheckbox: container.querySelector('#root_caregiverAddress_autofill'), vaTextInput: container.querySelector('#root_caregiverAddress_postalCode'), + streetInput: container.querySelector('#root_caregiverAddress_street'), }); return { container, selectors }; }; @@ -165,6 +168,31 @@ describe('CG ', () => { }); }); + it('should call all `onChange` methods to update the form data in case of autocomplete', async () => { + const { mockStore, props } = getData({}); + const { container, selectors } = subject({ mockStore, props }); + const formData = { + ...props.formData, + postalCode: postalCode.valid, + street: '123 Fake st.', + }; + + await waitFor(() => { + selectors().streetInput.value = formData.street; + inputVaTextInput( + container, + formData.postalCode, + selectors().vaTextInput, + ); + const blurEvent = new CustomEvent('blur'); + selectors().vaTextInput.dispatchEvent(blurEvent); + expect(props.onChange.calledWith(formData)).to.be.true; + + fireEvent.blur(selectors().vaTextInput); + expect(selectors().vaTextInput).to.not.have.attr('error'); + }); + }); + it('should render error when `blur` event is fired with invalid data', async () => { const { mockStore, props } = getData({}); const { container, selectors } = subject({ mockStore, props });