[Datagrid]: Virtual scrolling container div has zero width

[holmansze]

Package

Carbon for IBM Products

Description

After moving up from 2.47.0 to 2.50.0, when rendering Datagrid with virtual scrolling (useInfiniteScroll), the Datagrid is sometimes invisible.

When inspecting the DOM, I saw that the virtual scrolling container div (with class c4p--datagrid__virtual-scrollbar) has width: 0px, unchecking it will reveal the table.

This is a regression. It didn't happen in 2.47.0.

In 2.47.0, there is no width: 0px:

Component(s) impacted

Datagrid that uses useInfiniteScroll.

Browser

Chrome, Safari, Firefox, Microsoft Edge

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

2.50.0

Suggested Severity

Severity 1 = The design is broken in a critical way that blocks users from completing tasks or damages the brand. Affects major functionality, no workaround.

Product/offering

IBM Cloud Projects

CodeSandbox or Stackblitz example

N/A

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[devadula-nandan]

Hi @holmansze ,

this might be the cause of the regression, but not completely sure.

however, i believe one of my recent pr would fix that.
do you have a reproducible case, so we could test it?

[crichtonibm]

I was going to open a new issue, but I believe this is a different consequence from the same recent change:

73a9824

I also was fine at 2.47.0 ... after, I get NO width applied anywhere, and so I get no scrollbar. It is all sized to 100% by inheritance.

Referenced change to DataVirtualBody moved from always applying a changed clientWidth to the table body, to introducing two separate isomorphicEffects:

  useIsomorphicEffect(function () {
    if (headWrapRef.current && headWrapRef.current.style) {
      var _gridRef$current;
      headWrapRef.current.style.width = "".concat(gridRef === null || gridRef === void 0 || (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth, "px");
    }
  }, [headWrapRef, gridRef]);
  useIsomorphicEffect(function () {
    if (testRef !== null && testRef !== void 0 && testRef.current && testRef.current.style) {
      var _gridRef$current2;
      testRef.current.style.width = "".concat(gridRef === null || gridRef === void 0 || (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth, "px");
    }
  }, [testRef, gridRef]);

In my case, gridRef is set, but gridRef.current is not. It makes it into the effect once for the header-wrap and once for the virtual scrollbar. Since current is not set, I get NO width. I imagine for @holmansze it IS set, but the clientWidth is 0, and so it gets stuck there.

Either the clientWidth needs to be set on those individual components always, or the 'watcher arrays' on the effects should be referencing the actual elements and the target clientWidth ... something like: [testRef?.current, gridRef?.current?.clientWidth]

[davidmenendez]

@holmansze @crichtonibm could one of your provide a republication of this behavior in a code sandbox, stackblitz, etc? that would help us in identifying and debugging this. thanks!

[matthewgallo]

Hey @holmansze, @devadula-nandan's PR should be included in our release candidate which will be published later today.

[github-actions]

This issue is stale because it has been open for 7 days with no activity.
Remove the stale label or add a comment, otherwise this issue will be closed in 7 days.

[github-actions]

This issue was closed because it has received no activity for 14 days.