fix(ui): trim whitespace on delete confirmation input

Copy-pasting a key name into the delete dialog often includes surrounding
spaces, which left the Delete button disabled. Compare against the trimmed
input so a matching name still unlocks deletion.
This commit is contained in:
chahatkesh 2026-08-29 14:24:34 +05:30
parent ae7e50f096
commit 9719747080
2 changed files with 16 additions and 1 deletions

View file

@ -121,6 +121,19 @@ describe("DeleteResourceModal", () => {
expect(deleteButton).toBeEnabled();
});
it("should enable delete button when the confirmation input matches after surrounding whitespace is trimmed", () => {
renderWithProviders(<DeleteResourceModal {...defaultProps} requiredConfirmation="prod-key" />);
const input = screen.getByPlaceholderText("prod-key");
fireEvent.change(input, { target: { value: " prod-key " } });
expect(screen.getByRole("button", { name: /delete/i })).toBeEnabled();
});
it("should keep delete disabled when trimmed confirmation input still does not match", () => {
renderWithProviders(<DeleteResourceModal {...defaultProps} requiredConfirmation="prod-key" />);
fireEvent.change(screen.getByPlaceholderText("prod-key"), { target: { value: " other-key " } });
expect(screen.getByRole("button", { name: /delete/i })).toBeDisabled();
});
it("should reset requiredConfirmation input when modal opens", async () => {
const user = userEvent.setup();
const { rerender } = renderWithProviders(<DeleteResourceModal {...defaultProps} requiredConfirmation="DELETE" />);

View file

@ -101,7 +101,9 @@ export default function DeleteResourceModal({
<Button
variant="destructive"
onClick={onOk}
disabled={(!!requiredConfirmation && requiredConfirmationInput !== requiredConfirmation) || confirmLoading}
disabled={
(!!requiredConfirmation && requiredConfirmationInput.trim() !== requiredConfirmation) || confirmLoading
}
>
{confirmLoading ? "Deleting..." : "Delete"}
</Button>