There were several issues with the Grid in Firefox. This PR addresses three of them:
Grid resizing just didn't happen in Firefox
When attempting to resize, the drag handle woudl fly to the right and blow up the horizontal scrollbar
After fixing the above issues, the drag handle on Firefox was in a different location than Chrome
The fixes:
There was a conditional check that didn't run when a value that could be 0 in Firefox came back as falsy, thus Firefox would never actually save the new column position. The fix was allowing 0 values in the if statement.
Firefox calculated the size of the resize header based on event.scrollWidth. For some reason, in Firefox, this width was being calculated based on the previous width. This led to an exponential growth in Firefox when increasing the size of a header - the previous width would be used in the new width calculation, which would then be used in the next width calculation, which caused the right scroll bar to expand very quickly. This was fixed by calculating the width based on event.clientWidth, rather than scrollWidth.
Firefox was not properly applying the :active pseudo class, so the width calculation was incorrect. This was fixed by keeping track of the active state in React based on mouse presses and releases, and passing that value into styledComponents
There was also an a11y fix for Scrollable region must have keyboard access
Helps with: https://github.com/ClickHouse/control-plane/issues/9726 Helps with: https://github.com/ClickHouse/click-ui/issues/422
See: https://github.com/ClickHouse/click-ui/issues/455
There were several issues with the Grid in Firefox. This PR addresses three of them:
The fixes:
if
statement.event.scrollWidth
. For some reason, in Firefox, this width was being calculated based on the previous width. This led to an exponential growth in Firefox when increasing the size of a header - the previous width would be used in the new width calculation, which would then be used in the next width calculation, which caused the right scroll bar to expand very quickly. This was fixed by calculating the width based onevent.clientWidth
, rather thanscrollWidth
.:active
pseudo class, so the width calculation was incorrect. This was fixed by keeping track of theactive
state in React based on mouse presses and releases, and passing that value intostyledComponents
There was also an a11y fix for
Scrollable region must have keyboard access
New behavior in Firefox
https://github.com/user-attachments/assets/5083731e-be17-4619-ad3c-d73630b6572f
New behavior in Chrome
https://github.com/user-attachments/assets/1eff9c26-e5fe-429c-bf91-769844727a82