fix(useDisableBodyScroll): avoid affecting body's height #1279
Conversation
|
Size stats
|
|
Accessibility report ℹ️ You can run this locally by executing |
| @@ -53,7 +53,6 @@ export const useDisableBodyScroll = (disable: boolean): void => { | |||
| `top: ${-bodyScrollTop}px;`, | |||
| 'left: 0px;', | |||
| 'right: 0px;', | |||
| 'bottom: 0px;', | |||
There was a problem hiding this comment.
No need for the bottom: 0px;, because:
- If the body's height is smaller than the screen, there is no scroll, so it shouldn't be an issue.
- If there is scroll, the hook already fixes the top position and scrolls to the corresponding vertical position. Setting bottom to 0px doesn't change anything.
The issue is that if we also set bottom to 0, children of the body that have height:100% will be affected by this hook (because when top and bottom values are set, the height of the container becomes well defined, and it will trigger changes in the child).
There was a problem hiding this comment.
I've tried different scenarios, and everything seems to work fine:
- Body that has no scroll
- Body that has scroll
- Verified case when scroll position is at the top, middle and bottom of the body
- Verified that resizing the window while blocking the scroll doesn't affect anything, even if the body didn't have scroll before the resize and I make the window very small.
|
Deploy preview for mistica-web ready! ✅ Preview Built with commit 1804871. |
# [16.4.0](v16.3.1...v16.4.0) (2024-11-04) ### Bug Fixes * **TextField:** adjust position of maxLength's screen reader label ([#1283](#1283)) ([fda424e](fda424e)) * **TextField:** avoid right helper text from wrapping, fix spacing and aria label for maxCount text when multiline is true ([#1272](#1272)) ([85fcb31](85fcb31)) * **useDisableBodyScroll:** avoid affecting body's height ([#1279](#1279)) ([b68f317](b68f317)) ### Features * **PhoneNumberFieldLite:** Phone number field with simple formatting to reduce bundle size ([#1276](#1276)) ([a141b97](a141b97)) * **Row:** allow aria-label in informative rows ([#1269](#1269)) ([65b5d42](65b5d42)) * **Rows, Cards, FeedbackScreen, FormFields, Buttons:** add test ids for components and their internal elements ([#1270](#1270)) ([fc63201](fc63201)) * **Spinner:** improve a11y ([#1274](#1274)) ([5267ad5](5267ad5)) * **Switch, RadioButton, Checkbox, ProgressBar, ProgressBarStepped, Slider:** create inverse variant ([#1277](#1277)) ([3129fb9](3129fb9))
|
🎉 This PR is included in version 16.4.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Issue: Link