mirror of
https://github.com/baptisteArno/typebot.io.git
synced 2026-06-25 21:01:54 +08:00
🚸 (dateInput) Add submit on Enter press (#2176)
This commit is contained in:
parent
9563a79d44
commit
a322789215
@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user