lob / react-address-autocomplete Goto Github PK

We recently conducted user testing on one of our websites and encountered an issue that appears to affect the accessibility of the select component. During form navigation, some test users utilized the 'tab' key to move from one element to another. However, when they attempted to select their address from the Lob autocomplete, they were unable to tab to the address option they wanted to use. Instead, they were redirected from our site to the Lob website. (See gif below)

After researching the code-base, I found intentional window location changes. Is there any way to prevent redirection? The redirect happens within the handleChange function which is used in the onChange event.

Based on the comments, it seems that the onChange event is intentionally defined after the user has supplied properties to avoid any unintended damage to the functionality. Is there a way to configure the component so that users can select their address using their keyboard?

Hi guys, is there any way to enable typescript support or do you guys think it is not a thing coming soon?

and the good ol' npm i --save-dev @types/@lob/react-address-autocomplete nor npm i --save-dev @types/lob__react-address-autocomplete does work.

See https://github.com/lob/react-address-autocomplete/blob/main/src/AddressForm/AddressFormInternational.js#L85

Steps to reproduce:

1. Add AddressFormInternational component
2. Completely fill out a valid non-US address, then make Address Line 1 something fake (eg: 123 fake st)
3. Submit the form
4. Receive error
5. Update Address Line 1 with the valid value
6. Submit the form
7. Receive error:

Uncaught (in promise) Error: Expected countryCode to be of type string
at validateArguments (verify.js:36:1)
at verifyInternational (verify.js:89:1)
at handleSubmit (AddressFormInternational.js:78:1)

Any thoughts on a fix or workaround? Thanks

Seems like linking to images in the public folder requires more than just calling it :(
https://www.geeksforgeeks.org/how-to-use-files-in-public-folder-in-reactjs/

When selecting an address in mobile browsers (and even in the mobile emulation on desktop browsers) the value is not updated with the selected one. Everything else seems to be working correctly. Adding blurInputOnSelect={false} to the Autocomplete component fixed the issue, but I'm not entirely sure why.

After adding blurInputOnSelect={false}: