Inline Edit Optimistic Rollback

ProNew

An inline text edit that shows the new value immediately, saves in the background and rolls back with a flag when the server says no.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

value

label

Guide and examples

When to use it

Use this when saves usually succeed and the network is the slow part: renaming, tagging, toggling fields in a busy workspace.

Do not use it when a failure is common or costly (payments, publishing): wait for the server and show progress instead.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`value`	`string`	required	-
`label`	`string`	required	-
`save`	`(next: string) => Promise<void>`	required	Saves in the background. A rejection rolls the text back.

Accessibility

The failure is a flag with role=alert, so it is announced when the text rolls back.
Retry is a button inside the flag, reachable in order.
The editor closes at once; focus returns to the text.

Testing

The pattern ships with a Testing Library test (inline-edit-optimistic-rollback.test.tsx) that covers the instant value, the rollback with a flag and retrying.

Guide and examples

When to use it

Use this when saves usually succeed and the network is the slow part: renaming, tagging, toggling fields in a busy workspace.

Do not use it when a failure is common or costly (payments, publishing): wait for the server and show progress instead.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`value`	`string`	required	-
`label`	`string`	required	-
`save`	`(next: string) => Promise<void>`	required	Saves in the background. A rejection rolls the text back.

Accessibility

The failure is a flag with role=alert, so it is announced when the text rolls back.
Retry is a button inside the flag, reachable in order.
The editor closes at once; focus returns to the text.

Testing

The pattern ships with a Testing Library test (inline-edit-optimistic-rollback.test.tsx) that covers the instant value, the rollback with a flag and retrying.