Margins on connector incorrect
Closed this issue · 6 comments
I can reliably replicate this when using next.js (see https://codesandbox.io/s/patient-cdn-is6vgj?file=/pages/_app.js), but only sporadically when using vanilla react, (see https://codesandbox.io/s/chakra-ui-steps-s78fzp)
Summary
What happens is that the connector sometimes doesn't have the margins set correctly resulting in it overlapping the icon. Note the left and right margins in the following screenshot
Background
In trying to determine the cause I have noticed that inside the Step component the width of the Step is not set correctly in
It appears this is because the containerRef.current reference is null when called inside the setWidth function, but not outside it in that useEffect hook (components/Step/index.tsx#L75). Ie. the following code resolves my issue.
if (containerRef && containerRef.current && setWidths) {
const width = [containerRef.current?.offsetWidth || 0];
setWidths(prev => {
if (prev.length === stepCount) {
return width;
}
return [...prev, width];
});
}
}, [stepIconContainer.width, stepIconContainer.height]);
Additionally, if I change the keys on the Step while developing, causing react to soft-refresh, then the margins are calculated correctly. Until I next hard reload the page when it forgets the width again.
My React Foo isn't great enough here but I think there is something fishy happening that you might wish to look at. :)
"@chakra-ui/react": "2.2.1",
"@emotion/react": "11.9.3",
"@emotion/styled": "11.9.3",
"chakra-ui-steps": "1.7.3",
"framer-motion": "6.3.15",
"next": "12.1.6",
"react": "18.2.0",
"react-dom": "18.2.0"
Hey @curdin - thank you for pointing this out, I have been meaning to fix this for a while now, just haven't had a chance to look at it.. Hopefully soon! Will update here once fixed :)
Good day,
Is there any workaround for this? I wanted to use this library for the app im working on but it requires the label to show below the steps.
@jeanverster I had a go at fixing this behaviour in the above PR. It would certainly benefit from a thorough review by yourself :)
hi , anybody can fix it ?
@jeanverster do you mind pushing a new release that includes the above pull request to npm. Easier to include than my fork and possibly useful to others until your css rewrite is complete
Hey @curdin apologies about not releasing this sooner - work has been super busy recently and I haven't had much time to look into this.. I will push a release with your changes now 👍