[BUG]: Tabs are not usable right now with re-render

[savutsang]

Current behaviour

On every change to the tabs content (a re-render via state or redux store), it create a new Tabs and TabPanel instead of updating the existing one. Because the DOM is destroyed and recreated, the currently focused element are lost. Could also have many problems for other things like rendering a heavy Chart.

Expected behaviour

It should update the current panel, keeping the focus on the same element.

Steps to reproduce

export const TestComponent: React.VFC = () => {
  const [value, setValue] = useState("");
  return (
    <Tabs
      tabs={[
        {
          title: "Panel",
          panelContent: <input value={value} onChange={e => setValue(e.currentTarget.value)} />
        }
      ]}
    />
  );
};

Context (version, environment, browser)

Chrome
@equisoft/design-elements-react: 4.0.0
react: 17.0.2
react-dom: 17.0.2

Screenshots (optional)

Additional details (optional)

The problem is key is always changed because they are tight to useMemo() + uuid(). If we are able to specify our key manually, it could be one way to fix, or use another strategy.

As a reference, the bug didn't happen in MUI: https://mui.com/components/tabs/#main-content