[BUG] Text filling for kendo-combobox (Angular)

[nicholas-yong]

I wasn't able to set the value of the Angular Kendo-Combobox (at least that is what I think is happening) in a form via manual text input (simulated by selecting the text input and then using the fill function).

Filling in the combobox via selecting the button and then clicking on one of the dropdown options does work.

System info

• Playwright Version: [v1.31.2]
• Operating System: [macOS 12.2]
• Browser: [Chromium, Firefox]

Source code

// This is a locator for the input element that is attached to the kendo-combobox.
const publisherFormInput =  page.locator('form:nth-child(1) kendo-combobox[formcontrolname="publisher"] input')
await publisherFormInput.click()
await publisherFormInput.fill(product.publisher || '')
// tried dispatching a blur event to see if that sets the value.
await publisherFormInput.blur()

[yury-s]

I tried with the following test and it works fine:

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/');
  await page.frameLocator('#gatsby-focus-wrapper iframe').getByRole('combobox').click();
  await page.frameLocator('#gatsby-focus-wrapper iframe').getByRole('combobox').fill('Basketball');
  await page.frameLocator('#gatsby-focus-wrapper iframe').getByRole('combobox').press('Enter');
  await expect(page.frameLocator('#gatsby-focus-wrapper iframe').getByRole('combobox')).toHaveValue('Basketball');
});

If you think there is a bug in playwright please file a new issue following the template and providing a complete example which we can run locally to reproduce the problem.