Conversation
| zIndex: number; | ||
| value: string; | ||
| placeholder?: string; | ||
| placeholder: string; |
There was a problem hiding this comment.
placeholder can be nonnull as we always pass in "Enter your address" as default
There was a problem hiding this comment.
The intention is that the Autocomplete component is generic and could be used for other things where we may not always want a placeholder
| if (e.key === "ArrowDown" && results.length > 0) { | ||
| e.preventDefault(); | ||
| open(); | ||
| setHighlightedIndex(0); | ||
| } |
|
nice thanks dz |
bkobelan
left a comment
bkobelan
left a comment
There was a problem hiding this comment.
Changed to "portal only when active" architecture
I originally had this but we had many more bugs on iOS due to some focus issues and requiring two taps to bring up the keyboard.
I wanna play around with this before we merge. Do you have a link of where it is on staging?
| zIndex: number; | ||
| value: string; | ||
| placeholder?: string; | ||
| placeholder: string; |
There was a problem hiding this comment.
The intention is that the Autocomplete component is generic and could be used for other things where we may not always want a placeholder
| // This is more reliable than useEffect for mobile Safari | ||
| const setInputRef = useCallback((el: HTMLInputElement | null) => { | ||
| inputRef.current = el; | ||
| if (el) { | ||
| el.focus(); | ||
| } | ||
| }, []); |
There was a problem hiding this comment.
Are you sure this works well? on safari you can't programmatically focus an input that is not triggered by a click event. Looking at the code, this is triggered by a render which wouldn't qualify for being able to focus and show the keyboard.
|
abandon, see #23 |
3 participants
Problem
/get-started, the address search input was incorrectly positioned - floating in the middle of the page instead of its correct location.position: absolute, requiring JavaScript to continuously sync its position with a hidden placeholder.suspicion
This broke on
/get-startedbecause Webflow likely uses CSStransformfor animations, which creates a new containing block for absolute positioning - making our calculated coordinates wrong.Changes
Changed to "portal only when active" architecture:
Default state: Input is a visible button in normal document flow - browser handles positioning
Activated state (user clicks): Portal created with position calculated at that moment and continuous resizing
Refactored
Autocomplete.tsxComboBoxOverlay→ActivatedOverlayFixed mobile Safari focus issue
useEffectto callback ref for focusing input.Simplified
OverlayPositiontypeonly
top,left,widthneeded.Test
ScreenRecording_01-26-2026.19-05-01_1.MP4
ScreenRecording_01-26-2026.19-03-52_1.MP4