Address Autocomplete Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Change address button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same AddressSearch component and share the block's state, so a search typed in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

A popup that opens from inside a modal fights the modal's focus trap, and on some libraries it can't be reached at all, so the suggestions are part of the dialog's own content: a fixed-height area under the field, the same on every base and port. It shows the matches, a dashed empty state that names what you typed, or a hint before you start, so nothing moves when the results change, and the dialog is as tall when you have typed as when you haven't.

matchesOf keeps the addresses whose whole line contains every word you typed, in any case and any order, from ADDRESSES, a typed list of eight in the file; nothing is looked up. In your app call your address service as the query changes (with a short delay), put the results in the list in the same shape (a value, a label and its parts) and keep the empty state for a search that finds nothing. Keep the fields: a service never knows every flat, so a person must be able to edit what it gave back.

In the search panel, that you chose a match or opted to type, with a sentence that says which. In the fields panel, a street, a town and a postcode that has the shape of one, each with its own sentence under its field; focus goes to the first problem and the dialog stays open. The flat is optional. Once a message shows, it follows your typing and clears when the field is right. The Deliver to row behind the dialog then prints the new address, and the polite status message says nothing was saved.

Yes. The real dialog is named by its title and described by its sentence, focus starts in the search field and stays inside until it closes, and Escape, Cancel and the close button all return focus to Change address. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The list is a labelled listbox that Down arrow reaches from the field, with Up and Down to move and Enter to choose; the count is spoken after a pause, never on every key, through one polite status message. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the header button.

The copy shown on load docks to the foot of the page as a bottom sheet, its actions pinned at the bottom with Use this address on top, and the search, the list and the fields scroll above them. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.