Modal Create Form 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 is not modal, so nothing is trapped, hidden or focused. The New project 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 ProjectFields component and share the block's state, so what you 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.

Every way out except Create goes through one function, ask. On a clean form it closes. On a dirty one (anything typed or chosen) it keeps the dialog open and swaps the footer for the question, which sits in the same grid cell as the footer so the dialog never changes height; focus goes to Keep editing and a polite message says what happened. Keep editing, or Escape again, goes back to the fields; Discard closes and clears the form. The dialog is controlled, so Escape and the scrim reach ask through the Dialog's own open handler.

It checks the name (3 to 60 characters, and not the name of a project in the list), the description length and that a category is chosen. A problem shows under its field and focus goes to the first one; otherwise a row is added at the top of the drawn table, the dialog closes, focus returns to New project and a polite message says "Created Spring launch in Product. Nothing was saved in this demo." In your app post the values from create, wait for the server, add the row from the response and show a server refusal (a name that is taken) in the field's slot.

Yes. The real dialog is named by its title and described by its sentence, focus starts in the name field and stays inside until it closes, and every close returns focus to New project. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. Because a modal hides the page behind it, a second polite status inside the dialog speaks while it is open.

The copy shown on load docks to the foot of the page as a bottom sheet: the fields scroll above, and the footer stays pinned with its two buttons side by side. The real dialog keeps the Dialog's own phone layout, stuck to the bottom of the screen. The discard question uses the same footer space, with the question above the two buttons.

Keep the three values in the form and read its dirty state for the guard. With react-hook-form, formState.isDirty replaces isDirty here, handleSubmit(create) replaces the form's onSubmit and reset() replaces reset. With TanStack Form, use form.state.isDirty, validate each field on blur and call form.reset() from Discard.