[Feature Request] Support Numeric Values in fill for input[type=number] Fields

[snair7274]

Playwright currently does not support filling input[type=number] fields directly with numeric values, as the fill and type methods only accept strings. This limitation complicates interactions with numeric inputs, such as the following field:

There is an issue already exist for the same #16660, This was closed due to limited engagement and lack of recent activity, but the problem remains unresolved

getting the below error while calling fill method,

Error: locator.fill: Error: Cannot type text into input[type=number] Call log:

• waiting for getByLabel('accept-payment-points-collected')
• locator resolved to <input type="number" placeholder="Type here" _ngcontent…/>
• elementHandle.fill("NaN")
• waiting for element to be visible, enabled and editable
• Cannot type text into input[type=number]

I have tried with other option as well, with evaluate option. But which also not worked properly.

Related Issues: Original Feature Request #16660.

[mxschmitt]

The following works for me, could you help me creating a repro out of it?

it('should fill', async ({ page }) => {
  await page.setContent('<input type="number" id="input" value="2">');
  await page.locator('input').fill('13');
});

[snair7274]

@mxschmitt , using setContent replaces the entire content of the current page with the provided HTML and created a new input field instead of interacting with the existing one. I need to interact with the existing input field only (type=number)

I tried the below code as well, But I encounter unexpected behaviors.

const pointsToCollect = 10.00; const inputHandle = await this.page.getByLabel('accept-payment-points-collected'); await inputHandle.evaluate((input, value) => { (input as HTMLInputElement).value = value.toString(); input.dispatchEvent(new Event('input', { bubbles: true })); input.dispatchEvent(new Event('change', { bubbles: true })); }, pointsToCollect);

This approach does set the value successfully, but it causes some unexpected behaviors in the application, possibly due to how Angular manages form state and validation. I suspect that directly setting the input's value might bypass some internal framework checks or validation processes.

[mxschmitt]

We need something which we can run locally otherwise we can't act on it. Maybe you can create a small repro which demonstrates the unexpected behaviour?