Sublet address autocomplete#51
Conversation
There was a problem hiding this comment.
Good work - left some comments. Im also wondering if there's an alternative to Nominatim because when i search, looks like some of the zipcodes are wrong (like my house has a different zipcode than 19104). Also the address formatting on the dropdown looks kinda weird (like in the screenshot you have, "4039, Walnuit Street, West Philadelphia, Philadelphia,..." seems a bit unnatural than just "4039 Walnut Street"
So ig unless there's a way to better parse the address (we dont even have to show zipcode tbh) from Nonimatim, might be better to look for alternative options (pelias looks pretty good)
| const search = (newQuery: string) => { | ||
| setQuery(newQuery); | ||
| }; | ||
|
|
||
| const clearSuggestions = () => { | ||
| setQuery(""); | ||
| setDebouncedQuery(""); | ||
| }; | ||
|
|
There was a problem hiding this comment.
Add useCallback to both of these functions. Right now search and clearSuggestions are plain inline functions, which means React creates brand new copies of them on every render. Even though the new copies do the same thing, React sees them as "different" (like two separate pieces of paper with the same words written on them). This matters because AddressAutocomplete.tsx` lists both functions in a useEffect dependency array, and because search and clearSuggestions are new references every render, React thinks the dependencies changed and re-runs the effect every single time - including after the user presses ArrowDown/ArrowUp to navigate the dropdown. That effect calls setHighlightedIndex(-1), which immediately resets the highlight back to nothing before the user can see it. This is why keyboard navigation in the address dropdown doesn't work at all. Wrapping both functions in useCallback makes React reuse the same function reference across renders, so the effect only re-runs when value or hasValidatedAddress actually change.
There was a problem hiding this comment.
Left some comments, but good work overall!
https://github.com/user-attachments/assets/b86969be-072d-4154-a17b-81369d9b462c
Also, in the video above, when i unfocus with invalid address, it still tries to render the dropdown. I think the ideal behavior is to hide it on unfocus, but if the address is invaid, then disable submit button
2 participants
Validate sublet addresses with OpenStreetMap
