Async Assign With Rollback

ProNew

An assignee select that saves each choice to the server: it shows the new person at once, ignores out-of-date responses when choices come quickly, and returns to the previous person with an error and Retry on failure. Use this when picking a value saves it.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it in lists and boards where each row's owner, status or priority is saved on change, and a person may change their mind twice in a second.

Do not use it when the choice is part of a form that saves with one Submit. Use a plain select.

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 | Default | Description | | --------------- | ---------------- | ----------------------- | ------------------------------------ | -------------------------------------------------------- | | options | { id, name }[] | - | People (or statuses) to choose from. | | value | string \\ | null | - | The saved value (controlled). | | defaultValue | string \\ | null | null | Initial saved value. | | onSave | (id: string \\ | null) => Promise<void> | - | Saves the choice. Reject to roll back. | | onValueChange | (id: string \\ | null) => void | - | Runs with the value that is now saved or rolled back to. |

Accessibility

The button shows the pending choice with Saving… as text and is aria-busy while a save runs.
If a second choice is made while the first is saving, only the second response is applied; the first is ignored whatever its result.
On failure the button returns to the last saved person, a role="alert" line says Could not assign <name>. Still <previous>. and a Retry button repeats that choice.
The popover closes after a pick and focus returns to the button.

Testing

The pattern ships with a Testing Library test (async-assign-with-rollback.test.tsx) that covers saving states, the latest choice winning over a slow earlier one and rollback with Retry.

Guide and examples

When to use it

Use it in lists and boards where each row's owner, status or priority is saved on change, and a person may change their mind twice in a second.

Do not use it when the choice is part of a form that saves with one Submit. Use a plain select.

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

Accessibility

The button shows the pending choice with Saving… as text and is aria-busy while a save runs.
If a second choice is made while the first is saving, only the second response is applied; the first is ignored whatever its result.
On failure the button returns to the last saved person, a role="alert" line says Could not assign <name>. Still <previous>. and a Retry button repeats that choice.
The popover closes after a pick and focus returns to the button.

Testing

The pattern ships with a Testing Library test (async-assign-with-rollback.test.tsx) that covers saving states, the latest choice winning over a slow earlier one and rollback with Retry.