fix(webapp): concurrency limits modal cancels and resets limit on enter (#2804)

The Override concurrency limit modal has 2 type="submit" buttons. The
first one in the DOM was firing when the "enter" key is hit which
canceled and reset the limit instead which is a bad UX.

### The fix
This fix adds a hidden button above in the DOM order which mirrors the
Update Override button. Having a double submit button is rare in our
modals so feels safe to add this to the specific modal that needs it.

### Alternative solution
Switching the order of the buttons in the main FormButton component,
then using `flex-row-reverse` to flip them back in CSS works, but it
reverses the tab order. Adding a `tabIndex` to fix that issue didn't
seem to work reliably.
This commit is contained in:
James Ritchie
2026-01-07 14:14:23 +00:00
committed by GitHub
parent 583d299891
commit c68eb2d951
2 changed files with 18 additions and 0 deletions
@@ -3,10 +3,12 @@ import { cn } from "~/utils/cn";
export function FormButtons({
cancelButton,
confirmButton,
defaultAction,
className,
}: {
cancelButton?: React.ReactNode;
confirmButton: React.ReactNode;
defaultAction?: { name: string; value: string; disabled?: boolean };
className?: string;
}) {
return (
@@ -16,6 +18,17 @@ export function FormButtons({
className
)}
>
{defaultAction && (
<button
type="submit"
name={defaultAction.name}
value={defaultAction.value}
disabled={defaultAction.disabled}
className="hidden"
tabIndex={-1}
aria-hidden="true"
/>
)}
{cancelButton ? cancelButton : <div />} {confirmButton}
</div>
);
@@ -1003,6 +1003,11 @@ function QueueOverrideConcurrencyButton({
</div>
<FormButtons
defaultAction={{
name: "action",
value: "queue-override",
disabled: isLoading || !concurrencyLimit,
}}
confirmButton={
<Button
type="submit"