[Bug]: Method .fill does not accept type number.

[cuberinooo]

Version

1.48.2

Steps to reproduce

This problem has already been addressed elsewhere but not resolved. It is only unclear to me why the .fill() method does not accept the type number.
As you can see here: Input Number -> such an element should only accept numeric values.

Now to my specific problem:
We are using Vue with PrimeVue and PrimeVue provides the following component for InputFields with only numeric values: InputNumber PrimeVue

The following leads to a problem:
Assuming foo is the locator for the input field, then
foo.fill('123') -> primeVue turns this into a 0, as strings is not allowed here.

foo.fill(123) will throw an error since it can only accept strings

Here are some issues that describe exactly the same thing:
#16660
#33200
#28671

Expected behavior

I expect that fill should also allow numeric values

Actual behavior

fill() does not allow numeric values

Additional context

No response

Environment

System:
    OS: Linux 6.8 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
    Memory: 10.34 GB / 31.09 GB
    Container: Yes
  Binaries:
    Node: 20.18.0 - /usr/bin/node
    npm: 10.9.0 - /projects/core/node_modules/.bin/npm
  Languages:
    Bash: 5.2.15 - /usr/bin/bash
  npmPackages:
    @playwright/test: ^1.43.0 => 1.48.2 
    playwright-bdd: ^7.1.0 => 7.5.0

[mxschmitt]

The bug reports you were referring to were about accepting numbers typing-wise while the issue in your scenario is different.

The custom element doesn't listen on the 'input' event and thats why its not working. Its best-practise in the web-world to listen on this event in order to make things like drag'n drop of values, pasting etc. work out of the box. For example dragging a number into the <input /> field doesn't work because the component is not listening on it (different to normal <input /> controls).

It only listens on 'keypress' in order to get the values. The following mimics user-behaviour of clearing and typing a number in Playwright using pressSequencially and the keyboard APIs in order to workaround the bugs the component has:

it('should work', async ({ page, server }) => {
  await page.goto('https://primevue.org/inputnumber/');
  await page.getByLabel('Integer Only').focus();
  await page.keyboard.press('Meta+A');
  await page.keyboard.press('Backspace');
  await page.getByLabel('Integer Only').pressSequentially('987654321');
});

Note: We recommend listening on 'input' event.

---

I also found an issue that Inspector controls only showed up sometimes when opening Codegen, this will be fixed with #33627.

When interacting with the page Codegen didn't work for me because they call ev.preventDefault() here and then no 'input' event gets dispatched. Playwright Codegen only listens for the 'input' event. This might be something we could fix on our side.

[dgozman]

Closing as per above. If you still encounter problems, please file a new issue by filling in the "Bug Report" template and link to this one.

[cuberinooo]

@mxschmitt I was on the wrong track. Many thanks for pointing this out. I did not realize that the custom element does not listen on the input event.