Text input not persisting in form using Playwright

Question

I am filling out a form using Playwright/Typescript and it has a Date field. I have the Date entered in the correct format, and it does populate the text box, but when I click "Save" I get the image below

When I fill out this form manually it works fine using '02/25/25'. When I click through using codegen, and the same date, it saves fine. When I run the codegen test however, it fails at the same place my code is failing.

The date field is the below HTML.

I have tried all the below for the locator, and again the date fills just fine, its just not saving

await this.page.getByLabel('Needed By').fill('02/02/25')
await this.page.locator('//p-calendar//span').fill('02/25/25')
await this.page.locator('//p-calendar//span/input').fill('02/25/25')

Any ideas?

Answer 1

As I see, in the screenshot you provided, it seems to me you are using p-calendar component.

Please take a look at the source code of the component by the link. Pay closer attention that input field has keydown and blur handlers but it lacks ngModelChange handler. That's the reason why playwright fill won't do the trick for you. It fires stripped down set of events (e.g. focus, input), which doesn't include keydown.

In order for your example to work, you need to have fill replaced with pressSequentially which acts more "human" and fires the keydown event that p-calendar component expects.