Pressing keys ([Enter], [ArrowDown], etc.) does not work in antd select combobox input.

[karoAlfa]

Reproduction example

https://codesandbox.io/s/selectcombobox-test-nhch9c

Prerequisites

1. Use antd components library.
2. Render Select component with some options.
3. In the test get element by role 'combobox' (const input = screen.getByRole('combobox');)
4. Focus on the element (await user.click(input)).
5. In the keyboard type ArrowDown, ArrowDown, Eneter (await user.keyboard('[ArrowDown][ArrowDown][Enter]')).

Expected behavior

One of the options should be selected, and therefore handleChange function should be triggered.

Actual behavior

The handleChange function is not triggered at all.

User-event version

14.4.3

Environment

Testing Library framework: @testing-library/[email protected]

JS framework: [email protected]

Test environment: [email protected]

Antd library: [email protected]

Additional context

Recently, I've decided to upgrade my user-event package from 13.5.0 to 14. I have not had problems migrating tests with buttons, numeric input, and text inputs. But for some reason, combobox input behaves differently, and it looks like I can not use function keys on it such as ArrowDown, Enter, etc. It is worth mentioning that in the previous version (before 14), user-event worked perfectly fine with Select components from antd library.

[KrDimitrov]

Seems to be happening with KendoReact's combobox as well as Datepicker as well

[KumarDavinder]

I am having the same issue and do not know how to fix it. I passed from userEvent v13.5.0 to v14.4.3.

[kapiljaveri]

event.which seems to have gotten deprecated - https://github.com/testing-library/user-event/issues/842#issuecomment-1019528148 and is not filled out any more.

antd relies on this all over their code-base, which is why this doesn't work with v14.

https://github.com/search?q=repo%3Areact-component%2Fselect%20which&type=code

[coltanium13]

Am i understanding it correctly that the KeyboardEvent.code for 'Enter' is still just keyboard('[Enter]'), that is the KeyboardEvent.code right?

What does it mean that you should use KeyboardEvent.code instead, does that mean use the keyboard('[Enter]') bracket syntax?

i also have this discussion question out: https://github.com/testing-library/user-event/discussions/1164

[ph-fritsche]

As mentioned above deprecated and non-standard properties have been removed. The component should be updated to use KeyboardEvent.code or KeyboardEvent.key.

If you cannot fix a third-party component which relies on deprecated or non-standard properties, you can patch the event in your test.

const keyCodes = {
  Enter: 13,
}

document.addEventListener('keydown', e => {
  if (e.code in keyCodes) {
    Object.defineProperties(e, {
      keyCode: {configurable: true, get: () => keyCodes[e.code]},
      which: {configurable: true, get: () => keyCodes[e.code]},
    })
  }
}, {capture: true})

Add this to a setup function that you use in all tests which rely on that feature, and remove it once the third-party library is updated.