[WP6.1.1] FormTokenField: Revert to event.keyCode to fix IME composition issue

[t-hamano]

What?

This PR is backported to WP6.1.1 and reverts event.code to event.keyCode, one of the changes made to FormTokenField in #43442.

This separate PR # 45607 will be applied to Gutenberg's latest trunk.

Why?

The background behind the creation of this PR can be found after the comments here.

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[Mamaduka]

I think unit tests are failing because event.keyCode doesn't work with RTL.

@tyxla, any suggestions on how we can fix this?

[tyxla]

I think unit tests are failing because event.keyCode doesn't work with RTL.

@tyxla, any suggestions on how we can fix this?

@testing-library also supports key if code doesn't work for us. That would certainly fix the tests. Let me push a commit.

[t-hamano]

@tyxla
Thank you so much for your help 🙏

[tyxla]

Pushed 3146412 - let me know if it works well.

Alternatively, if that doesn't work, we can just fall back to using fireEvent for tests in these particular instances.

[t-hamano]

@tyxla
For this PR, we need to use event.keyCode, not event.key.
Please see comments beginning here.

Cool, let's keep this PR to merge into trunk, and open a separate event.keyCode PR for cherry-picking into 6.1.1. @t-hamano Are you still available today to do this? If not, I'd be happy to do it 🙂

Therefore, I believe that the test may need to be rewritten using fireEvent.

[Mamaduka]

@tyxla, we decided to revert to the deprecated event.keyCode to fix the IME bug. The update implementation of event.key or event.code isn't tested across different OS and languages.

See the discussion at #45607 (comment) for more details.

Alternatively, if that doesn't work, we can just fall back to using fireEvent for tests in these particular instances.

I think we might need this change to get tests working with event.keyCode.

[tyxla]

Cool, that makes sense. I'm happy to help with that migration FWIW.

[t-hamano]

We need to revert the refactoring from event.keyCode to event.code done in #43442. But this PR includes a rewrite to the RTL test.

Should we revert this entire PR?

[tyxla]

It would also revert the TS migration done there FWIW. cc @ciampo

Reverting the full PR might make sense in the short term, we can do a take 2 afterwards.

[Mamaduka]

It should be a "hotfix" for WP 6.1.1, so let's do what you think would be the simplest solution.

[t-hamano]

I am trying to refactor the following code to make it pass the tests.

fireEvent.keyDown( input, {
	keyCode: BACKSPACE,
} );

However, it fails for some tests, so it may be badly written

[t-hamano]

I adjusted the tests to pass while keeping the event.keyCode implementation.
This is how it looks:

await user.type( input, 'dragon fruit[Enter]' );

// to...

function triggerEnter( element: Element ) {
	fireEvent.keyDown( element, {
		keyCode: ENTER,
	} );
}

await user.type( input, 'dragon fruit' );
triggerEnter( input );

[mirka]

Code is working as expected, tested on Mac Chrome/Firefox/Safari 👍