LeftResizable adding erroneous left offset (when using React.StrictMode) - 2.0 beta issue

[luskin]

Describe the bug When using LeftResizable it adds an immense amount of left padding for no reason. We can't seem to resolve the issue

    <Space.ViewPort top={0} bottom={0} left={0} right={0}>
      <Space.LeftResizable
        minimumSize={200}
        maximumSize={350}
        size={200}
        style={{ backgroundColor: 'blue' }}
      >
        <div>Left</div>
      </Space.LeftResizable>
      <Space.Fill scrollable={true} style={{ backgroundColor: 'red' }}>
        <div>Middle</div>
      </Space.Fill>
    </Space.ViewPort>

Result:

[aeagle]

Hi @luskin,

I can't replicate this problem. I created a sandbox using your code which behaves correctly as far as I can see - https://codesandbox.io/s/restless-forest-3qht2?file=/src/App.tsx

Could you confirm the version of react-spaces you are using and browser?

[ttungbmt]

Hi @luskin,

I can't replicate this problem. I created a sandbox using your code which behaves correctly as far as I can see - https://codesandbox.io/s/restless-forest-3qht2?file=/src/App.tsx

Could you confirm the version of react-spaces you are using and browser?

I have same problem with padding left: https://codesandbox.io/s/hungry-shockley-iulzj?file=/src/App.js

[aeagle]

@ttungbmt

The sandbox you linked to doesn't work because there is no dependency added to react-spaces. I therefore can't tell what version you are using or replicate your problem.

[ttungbmt]

@ttungbmt

The sandbox you linked to doesn't work because there is no dependency added to react-spaces. I therefore can't tell what version you are using or replicate your problem.

I used react, react-dom v17, react-spaces v0.2.0-beta.2 (Window 10): https://codesandbox.io/s/delicate-snowflake-fcipv. I can't find bugs to fix this. Thanks

[aeagle]

@ttungbmt @luskin Thanks for the information. and as a workaround for now can you give the <LeftResizable /> an id? It appears to be on refreshes the space is given a different auto generated id each time when it should have the same id. I'll need to look into why that is happening.

[luskin]

Same, v 0.2.0-beta.2 here

[aeagle]

Upon more investigation the issue only appears when using <React.StrictMode> ... </React.StrictMode> in your app. Still looking into this.

[aeagle]

So digging into this deeper it appears the <React.StrictMode /> wrapper had an incompatibility with the method used to give each space an auto generated id and keep track of each spaces dimensions in the internal state wrapper.

Because strict mode fires renders twice on components in a dev environment (https://reactjs.org/docs/strict-mode.html), each space was getting a different id during each render effectively duplicating it's entry in the internal state, manifesting itself as a space leaving space for itself, shown up as the gaps.

I've added a workaround to ensure an autogenerated id is consistent between double renders on the same component which should fix this issue when using <React.StrictMode> which I believe is now added automatically on a newly created CreateReactApp project.

You can try this on v0.2.0-beta.3

[aeagle]

Feel free to reopen if you are still having issues with v0.2.0