[bug]: The input element does not respond to keyboard entry

[anatolii-krotov-ew]

What version of strapi-design-system are you using?

• npm v.9.8.1
• node v.18.18.2
• @strapi/design-system@1.13.0
• Browser: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

What's Wrong?

Calling Dialog with an Input element from within a Table cell makes the Input element not editable from a keyboard.

To Reproduce

StackBlitz link

Expected Behaviour

Input element is fully functional

[madhurisandbhor]

After investigating, I found that its not really the Input element causing the issue, but the way Td handles the keyDownEvent here, https://github.com/strapi/design-system/blob/main/packages/design-system/src/components/RawTable/RawCell.tsx#L51
For now to let your modal inside Td to work, you can override the keydownEvent or have a separate cell to render your modal and action buttons.

[anatolii-krotov-ew]

After investigating, I found that its not really the Input element causing the issue, but the way Td handles the keyDownEvent here, https://github.com/strapi/design-system/blob/main/packages/design-system/src/components/RawTable/RawCell.tsx#L51 For now to let your modal inside Td to work, you can override the keydownEvent or have a separate cell to render your modal and action buttons.

This is noted. Thanks for your time! I used another approach for my use case. I've simply rendered the popup outside the table. And combination of forwardRef + useImperativeHandle did it's thing.

[madhurisandbhor]

Closing this as the main issue is raised here #798