🚸 (dateInput) Add submit on Enter press (#2176)

This commit is contained in:
Sanmith Kurian 2025-05-21 05:50:38 -07:00 committed by GitHub
parent 9563a79d44
commit a322789215
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 69 additions and 0 deletions

View File

@ -60,4 +60,64 @@ test.describe("Date input block", () => {
page.locator('text="01.01 11:00 to 01.02 09:00"'),
).toBeVisible();
});
test("min/max date validation should work", async ({ page }) => {
const typebotId = createId();
await createTypebots([
{
id: typebotId,
...parseDefaultGroupWithBlock({
type: InputBlockType.DATE,
}),
},
]);
await page.goto(`/typebots/${typebotId}/edit`);
await page.click("text=Test");
// Return to edit mode to set min/max dates
await page.click(`text=Pick a date`);
await page.getByLabel("Min:").fill("2023-01-01");
await page.getByLabel("Max:").fill("2023-12-31");
await page.click("text=Restart");
// Browser native validation should prevent entering dates outside range
await expect(page.locator('[data-testid="from-date"]')).toHaveAttribute(
"min",
"2023-01-01",
);
await expect(page.locator('[data-testid="from-date"]')).toHaveAttribute(
"max",
"2023-12-31",
);
// Test valid date within range
await page.locator('[data-testid="from-date"]').fill("2023-06-15");
await page.getByLabel("Send").click();
await expect(page.locator('text="15/06/2023"')).toBeVisible();
});
test("keyboard navigation and form submission should work", async ({
page,
}) => {
const typebotId = createId();
await createTypebots([
{
id: typebotId,
...parseDefaultGroupWithBlock({
type: InputBlockType.DATE,
}),
},
]);
await page.goto(`/typebots/${typebotId}/edit`);
await page.click("text=Test");
// Fill the date and submit using Enter key
await page.locator('[data-testid="from-date"]').fill("2023-07-04");
await page.locator('[data-testid="from-date"]').press("Enter");
await expect(page.locator('text="04/07/2023"')).toBeVisible();
});
});

View File

@ -26,6 +26,13 @@ export const DateForm = (props: Props) => {
});
};
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Enter") {
e.preventDefault();
submit();
}
};
return (
<div class="typebot-input-form flex gap-2 items-end">
<form
@ -66,6 +73,7 @@ export const DateForm = (props: Props) => {
from: e.currentTarget.value,
})
}
onKeyDown={handleKeyDown}
min={props.options?.min}
max={props.options?.max}
data-testid="from-date"
@ -94,6 +102,7 @@ export const DateForm = (props: Props) => {
to: e.currentTarget.value,
})
}
onKeyDown={handleKeyDown}
min={props.options?.min}
max={props.options?.max}
data-testid="to-date"