Open brian-smith-tcril opened 10 months ago
add callback "onErrorStateChange" to Form.Autosuggest
As of https://github.com/openedx/frontend-app-authn/pull/1157 the new Autosuggest component is being used, but not to its full potential
None of the internal error state management is being used
instead the error state is managed in handleOnFocus
and handleOnBlur
and there are workarounds such as
The comment mentions the lack of onSelected
, but handleOnSelected
would just call handleOnBlur
before
which, as of https://github.com/openedx/frontend-app-authn/pull/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
(https://github.com/openedx/paragon/issues/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
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 ishandleErrorChange
as seen here:https://github.com/openedx/frontend-app-authn/blob/2ea9301c5e763b26e6e4529e9ff2c3283b0f6bdf/src/register/RegistrationFields/CountryField/CountryField.jsx#L68-L68