update `CountryField` to better utilize new paragon `Form.Autosuggest`

Paragon 22 includes breaking changes for Form.Autosuggest. These should aid in simplifying the implementation of CountryField, but some changes may be needed in Paragon to support certain parts of the error handling logic. One part that stands out is handleErrorChange as seen here:

frontend-app-authn/src/register/RegistrationFields/CountryField/CountryField.jsx

Line 68 in 2ea9301

handleErrorChange('country', error);

add callback "onErrorStateChange" to Form.Autosuggest

As of #1157 the new Autosuggest component is being used, but not to its full potential

None of the internal error state management is being used

frontend-app-authn/src/register/RegistrationFields/CountryField/CountryField.jsx

Lines 107 to 116 in a6e96f5

    
           <FormAutosuggest 
        
             floatingLabel={formatMessage(messages['registration.country.label'])} 
        
             aria-label="form autosuggest" 
        
             name="country" 
        
             value={countryFieldValue || {}} 
        
             className={classNames({ 'form-field-error': props.errorMessage })} 
        
             onFocus={(e) => handleOnFocus(e)} 
        
             onBlur={(e) => handleOnBlur(e)} 
        
             onChange={(value) => handleOnChange(value)} 
        
           >

instead the error state is managed in handleOnFocus and handleOnBlur

frontend-app-authn/src/register/RegistrationFields/CountryField/CountryField.jsx

Lines 67 to 85 in a6e96f5

    
           const handleOnBlur = (event) => { 
        
             // Do not run validations when drop-down arrow is clicked 
        
             if (event.relatedTarget && event.relatedTarget.className.includes('pgn__form-autosuggest__icon-button')) { 
        
               return; 
        
             } 
        
             const { value } = event.target; 
        
             const { error } = validateCountryField( 
        
               value.trim(), countryList, formatMessage(messages['empty.country.field.error']), formatMessage(messages['invalid.country.field.error']), 
        
             ); 
        
             handleErrorChange('country', error); 
        
           }; 
        
           const handleOnFocus = (event) => { 
        
             handleErrorChange('country', ''); 
        
             dispatch(clearRegistrationBackendError('country')); 
        
             onFocusHandler(event); 
        
           };

and there are workarounds such as

frontend-app-authn/src/register/RegistrationFields/CountryField/CountryField.jsx

Lines 90 to 96 in a6e96f5

    
           // We have put this check because proviously we also had onSelected event handler and we call 
        
           // the onBlur on that event handler but now there is no such handler and we only have 
        
           // onChange so we check the is there is proper sectionId which only be 
        
           // proper one when we select it from dropdown's item otherwise its null. 
        
           if (value.selectionId !== '') { 
        
             handleOnBlur({ target: { name: 'country', value: value.userProvidedText } }); 
        
           }

The comment mentions the lack of onSelected, but handleOnSelected would just call handleOnBlur before

frontend-app-authn/src/register/RegistrationFields/CountryField/CountryField.jsx

Lines 76 to 78 in 872aa48

    
           const handleSelected = (value) => { 
        
             handleOnBlur({ target: { name: 'country', value } }); 
        
           };

which, as of #1157, is just used for updating error state

-    const { countryCode, displayValue, error } = validateCountryField(
+    const { error } = validateCountryField(
       value.trim(), countryList, formatMessage(messages['empty.country.field.error']), formatMessage(messages['invalid.country.field.error']),
     );
-
-    onChangeHandler({ target: { name: 'country' } }, { countryCode, displayValue });
     handleErrorChange('country', error);

Therefore, I believe that this can be handled with an onErrorStateChange callback in Form.Autosuggest (openedx/paragon#3002)

Hi @brian-smith-tcril, Thank you for this detailed comment.

In addition to the missing onErrorStateChange, the reason for not using the internal error state provided by Form.Autosuggest is the way it renders error. It is prefixed with "x" icon with no way to remove it. All other errors on Authn don't have it and this makes the form errors inconsistent.

AutoSuggest Error	Other Errors on Authn

We will resume working on this and update country field once we have onErrorStateChange. This will provide us a way to set multiple errors i.e empty field error and invalid selection error

	<FormAutosuggest
	floatingLabel={formatMessage(messages['registration.country.label'])}
	aria-label="form autosuggest"
	name="country"
	value={countryFieldValue \|\| {}}
	className={classNames({ 'form-field-error': props.errorMessage })}
	onFocus={(e) => handleOnFocus(e)}
	onBlur={(e) => handleOnBlur(e)}
	onChange={(value) => handleOnChange(value)}
	>

	const handleOnBlur = (event) => {
	// Do not run validations when drop-down arrow is clicked
	if (event.relatedTarget && event.relatedTarget.className.includes('pgn__form-autosuggest__icon-button')) {
	return;
	}

	const { value } = event.target;

	const { error } = validateCountryField(
	value.trim(), countryList, formatMessage(messages['empty.country.field.error']), formatMessage(messages['invalid.country.field.error']),
	);
	handleErrorChange('country', error);
	};

	const handleOnFocus = (event) => {
	handleErrorChange('country', '');
	dispatch(clearRegistrationBackendError('country'));
	onFocusHandler(event);
	};

	// We have put this check because proviously we also had onSelected event handler and we call
	// the onBlur on that event handler but now there is no such handler and we only have
	// onChange so we check the is there is proper sectionId which only be
	// proper one when we select it from dropdown's item otherwise its null.
	if (value.selectionId !== '') {
	handleOnBlur({ target: { name: 'country', value: value.userProvidedText } });
	}

	const handleSelected = (value) => {
	handleOnBlur({ target: { name: 'country', value } });
	};