[bug]: Dynamically created inputs are not being able to get focus within table cell

[yf-hk]

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

• Strapi Design System Version: 1.2.7

What's Wrong?

I'm using Table and TextInput to customize Strapi's admin panel. Previously the design system works fine with dynamically created rows and TextInputs within the table cell. However not sure since which version, it doesn't work any more. When clicking on any input element it will be unfocused immediately. After hours of debuging I found that it was due to the focus event for these controls. focusableNodes in https://github.com/strapi/design-system/blob/fe27b82d12f8cd9875518adbefc478877e7fb5a7/packages/strapi-design-system/src/RawTable/RawCell.js doesn't reflex any newly added items.
This is really very rigid. Please consider allowwing dynamically created inputs to get focus.

To Reproduce

Create a Table, and within Td, add some TextInputs using Javascript, then try to click the newly created inputs, they will get unfocused immediately

Expected Behaviour

All input fields should be able to get focus except the disabled ones.

[yf-hk]

Meanwhile, this is how I fix this bug temporarily:

  useLayoutEffect(() => {
    let index = 0;
    document.querySelectorAll('input, button, textarea, select').forEach(element => {
      element.tabIndex = index++;
      element.addEventListener('focus', (e) => {
        e.stopPropagation()
        e.preventDefault()
      }, { capture: true });
    });
  }, []);

[joshuaellis]

Can you share an example because I find your reproduction steps to be unclear, consider using codesandbox 😊

[yf-hk]

@joshuaellis Thanks for your reply. I created a sandbox here https://codesandbox.io/s/trusting-pine-0k7k99
If you just add a few new textboxes, try to change the value of some input, then random click some other inputs, you will find that a lot of them cannot be clicked because of the focus event.

[madhurisandbhor]

Similar issue - #1445