Arrow keys do not work inside TextInput component

[benderillo]

Bug report

Required System information

• NodeJS version: 16.14.0
• Strapi Design System version: 4.2.2
• Browser: Chrome

Describe the bug

Pressing Arrow Keys inside a TextInput element does not move cursor inside the text field. Instead it moves focus to other elements on the page.

Steps to reproduce the behavior

Here is a piece of React JSX that exhibit this behaviour:

<Table>
<Tbody>
  {entries.map((entry, index) => (
    <Tr key={index}>
      <Td>
        <TextInput
          name={`${index}.title`}
          aria-label="item title"
          onChange={(e) => updateEntry(index, { title: e.target.value })}
          value={entries[index].title}
        />
      </Td>
</Tbody>
</Table>

This will render a table with rows having a TextInput component each. Try using arrow keys in any of the inputs, and it won't move a cursor within the text but rather move the focus to other elements on the page.

Expected behavior

Since TextInput is an element for working with text, it should behave like any text editor. Arrows should move the cursor within the text and all the shortcuts involving arrow keys should work too, e.g. CMD+SHIFT+ARROW should select entire line, and so on.

Screenshots

If applicable, add screenshots to help explain your problem.

Code snippets

Additional context

The same behaviour can be seen with TextInput components that are placed inside repeatable component in Content-Manager view. This is a clue that the issue is really with the <Table> component... If I wrap the TextInput in a div that intercepts the keyDown and keyUp events and stop propagating them up to parent, I can use the TextInput as expected.

[gu-stav]

Related https://github.com/strapi/design-system/issues/614