You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The live announcer div appended to the top of the body is supposed to be invisible and not affecting the page at all, however it does still have height and width and does affect the page its on.
If you focus, or do any action, enough times without let up; then the announcer grows in height to such a degree that the pages scroll starts to grow. After the announcer starts deleting items from itself, the scroll bar will shrink again.
If any of this happens while the user has also scrolled the window, then when the body scroll height changes, it appears as if something is taking over your scroll and jittering you up or down the page.
The data-live-announcer should be completely invisible, including height and width.
😯 Current Behavior
The data-live-announcer will grow in height till it pushes the height and width of the body. There is a sandbox listed here that lets you focus back and forth in a comboBox, creating live announce events. When you do so the number next to it is the current height of the announcer div. Notice that if you move your mouse back and forth repeatedly over the items in the drop down, that the height grows and will eventually cause a scroll state.
Scrolling in this state, with the announcer changing in height will lead to strangeness.
💁 Possible Solution
I've made a PR to show the potential solution: #3792
Object.assignnode.style does not accept 1 as a value for width and height; it requires '1px'
🔦 Context
This has lead to a lot of issues using the ComboBox in our product. It has expressed itself as weird scrolling issues. I have spent many hours over the last few weeks tracking this down off and on. At first I thought this was a rogue window.scrollTop issue.
I first had to isolate this repo as the issue, and work out how to recreate it. Recreating the issue was hard given that it depends on your screen height and the way you focus on the ComboBox's dropdown items. I wasn't even sure how to recreate it until I found the data-live-announcer issue.
I finally caught this when in a StoryBook story, trying to keep an eye on how the items in our dropdown looked while focused and not focused, the scroll bar was growing. That smelled like items were being appended to the body. Then managed to track the appending items to the announcer, and sure enough it was growing.
I'll be honest here, i'm over joyed I finally caught this bug. This was driving me utterly nuts, I've been heavily scoping this repos source code for the last few weeks to try figure it out... and I found it on accident while doing something else. This is the way, i suppose.
💻 Code Sample
Here is a sandbox to recreate the issue. Move your mouse back and forth across the dropdown items to watch the number grow.
When the scrollbar expands beyond the screen, try scrolling down and see what happens as it shrinks again.
🐛 Bug Report
The live announcer div appended to the top of the body is supposed to be invisible and not affecting the page at all, however it does still have height and width and does affect the page its on.
If you focus, or do any action, enough times without let up; then the announcer grows in height to such a degree that the pages scroll starts to grow. After the announcer starts deleting items from itself, the scroll bar will shrink again.
If any of this happens while the user has also scrolled the window, then when the body scroll height changes, it appears as if something is taking over your scroll and jittering you up or down the page.
🤔 Expected Behavior
The data-live-announcer should be completely invisible, including height and width.
😯 Current Behavior
The data-live-announcer will grow in height till it pushes the height and width of the body. There is a sandbox listed here that lets you focus back and forth in a comboBox, creating live announce events. When you do so the number next to it is the current height of the announcer div. Notice that if you move your mouse back and forth repeatedly over the items in the drop down, that the height grows and will eventually cause a scroll state.
Scrolling in this state, with the announcer changing in height will lead to strangeness.
💁 Possible Solution
I've made a PR to show the potential solution: #3792
It comes down to this here:
react-spectrum/packages/@react-aria/live-announcer/src/LiveAnnouncer.tsx
Lines 69 to 80 in 71cfa87
Object.assign
node.style
does not accept1
as a value for width and height; it requires'1px'
🔦 Context
This has lead to a lot of issues using the ComboBox in our product. It has expressed itself as weird scrolling issues. I have spent many hours over the last few weeks tracking this down off and on. At first I thought this was a rogue
window.scrollTop
issue.I first had to isolate this repo as the issue, and work out how to recreate it. Recreating the issue was hard given that it depends on your screen height and the way you focus on the ComboBox's dropdown items. I wasn't even sure how to recreate it until I found the data-live-announcer issue.
I finally caught this when in a StoryBook story, trying to keep an eye on how the items in our dropdown looked while focused and not focused, the scroll bar was growing. That smelled like items were being appended to the body. Then managed to track the appending items to the announcer, and sure enough it was growing.
I'll be honest here, i'm over joyed I finally caught this bug. This was driving me utterly nuts, I've been heavily scoping this repos source code for the last few weeks to try figure it out... and I found it on accident while doing something else. This is the way, i suppose.
💻 Code Sample
Here is a sandbox to recreate the issue. Move your mouse back and forth across the dropdown items to watch the number grow.
When the scrollbar expands beyond the screen, try scrolling down and see what happens as it shrinks again.
https://codesandbox.io/s/eager-jackson-gy3btv?file=/src/App.js
🌍 Your Environment
The text was updated successfully, but these errors were encountered: