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:
@@ -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>
|
||||
);
|
||||
|
||||
+5
@@ -1003,6 +1003,11 @@ function QueueOverrideConcurrencyButton({
|
||||
</div>
|
||||
|
||||
<FormButtons
|
||||
defaultAction={{
|
||||
name: "action",
|
||||
value: "queue-override",
|
||||
disabled: isLoading || !concurrencyLimit,
|
||||
}}
|
||||
confirmButton={
|
||||
<Button
|
||||
type="submit"
|
||||
|
||||
Reference in New Issue
Block a user