Update List to render children on first render() call

apps/ssr-tests/test/test.js

@@ -46,6 +46,12 @@ describe('Utilities', () => {
       assert.equal(library.getDocument(), undefined);
     });
   });
+
+  describe('canUseDOM', () => {
+    it('returns false in server environment', () => {
+      assert.equal(library.canUseDOM(), false);
+    });
+  });
 });
 
 function testRender(componentName, component) {
@@ -56,7 +62,7 @@ function testRender(componentName, component) {
       ReactDOMServer.renderToString(elem);
       done();
     } catch (e) {
-      done(new Error(e));
+      done(e);
     }
   });
 }

change/@fluentui-react-007e7f0d-8dbf-432c-ad60-6cbf4191ce79.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: update List to render children on first render() call",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react/etc/react.api.md

@@ -6760,6 +6760,8 @@ export interface IListState<T = any> {
     // (undocumented)
     getDerivedStateFromProps(nextProps: IListProps<T>, previousState: IListState<T>): IListState<T>;
     // (undocumented)
+    hasMounted: boolean;
+    // (undocumented)
     isScrolling?: boolean;
     measureVersion?: number;
     // (undocumented)

packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap

@@ -8114,7 +8114,7 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                       flex-shrink: 0;
                                     }
                                 data-automationid="DetailsRow"
-                                data-focuszone-id="FocusZone9"
+                                data-focuszone-id="FocusZone7"
                                 data-is-focusable={true}
                                 data-item-index={0}
                                 data-selection-index={0}
@@ -8416,7 +8416,7 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                       flex-shrink: 0;
                                     }
                                 data-automationid="DetailsRow"
-                                data-focuszone-id="FocusZone11"
+                                data-focuszone-id="FocusZone9"
                                 data-is-focusable={true}
                                 data-item-index={1}
                                 data-selection-index={1}
@@ -8662,7 +8662,7 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                     >
                       <div
                         aria-expanded={true}
-                        aria-labelledby="GroupHeader7"
+                        aria-labelledby="GroupHeader11"
                         aria-rowindex={5}
                         className=
                             ms-GroupHeader
@@ -8854,7 +8854,7 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                   white-space: nowrap;
                                 }
                             data-selection-invoke={true}
-                            id="GroupHeader7"
+                            id="GroupHeader11"
                             onClick={[Function]}
                             role="gridcell"
                           >
@@ -8881,7 +8881,7 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                       <div
                         aria-label="Group 1"
                         className="ms-List"
-                        id="GroupedListSection6"
+                        id="GroupedListSection10"
                         role="rowgroup"
                       >
                         <div

packages/react/src/components/List/List.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   Async,
   EventGroup,
+  canUseDOM,
   css,
   divProperties,
   findIndex,
@@ -46,6 +47,7 @@ export interface IListState<T = any> {
   getDerivedStateFromProps(nextProps: IListProps<T>, previousState: IListState<T>): IListState<T>;
 
   pagesVersion?: {};
+  hasMounted: boolean;
 }
 
 interface IPageCacheItem<T> {
@@ -118,7 +120,6 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
   };
   private _focusedIndex: number;
   private _scrollElement?: HTMLElement;
-  private _hasCompletedFirstRender: boolean;
 
   // surface rect relative to window
   private _surfaceRect: IRectangle | undefined;
@@ -159,6 +160,7 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
       pages: [],
       isScrolling: false,
       getDerivedStateFromProps: this._getDerivedStateFromProps,
+      hasMounted: false,
     };
 
     this._async = new Async(this);
@@ -334,9 +336,18 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
   }
 
   public componentDidMount(): void {
+    this.setState({ hasMounted: true });
     this._scrollElement = findScrollableParent(this._root.current) as HTMLElement;
     this._scrollTop = 0;
-    this.setState(this._updatePages(this.props, this.state));
+
+    if (!this.props.getPageHeight) {
+      const heightsChanged = this._updatePageMeasurements(this.state.pages!);
+      if (heightsChanged) {
+        this._materializedRect = null;
+        this.setState(this._updatePages(this.props, this.state));
+      }
+    }
+
     this._measureVersion++;
 
     this._events.on(window, 'resize', this._onAsyncResize);
@@ -361,15 +372,9 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
         // If measured version is invalid since we've updated the DOM
         const heightsChanged = this._updatePageMeasurements(finalState.pages!);
 
-        // On first render, we should re-measure so that we don't get a visual glitch.
         if (heightsChanged) {
           this._materializedRect = null;
-          if (!this._hasCompletedFirstRender) {
-            this._hasCompletedFirstRender = true;
-            this.setState(this._updatePages(finalProps, finalState));
-          } else {
-            this._onAsyncScroll();
-          }
+          this._onAsyncScroll();
         } else {
           // Enqueue an idle bump.
           this._onAsyncIdle();
@@ -489,8 +494,12 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
       nextProps.items !== this.props.items ||
       nextProps.renderCount !== this.props.renderCount ||
       nextProps.startIndex !== this.props.startIndex ||
-      nextProps.version !== this.props.version
+      nextProps.version !== this.props.version ||
+      !previousState.hasMounted
     ) {
+      if (!canUseDOM()) {
+        return previousState;
+      }
       // We have received new items so we want to make sure that initially we only render a single window to
       // fill the currently visible rect, and then later render additional windows.
       this._resetRequiredWindows();
@@ -534,7 +543,7 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
 
     const pageElement = onRenderPage(
       {
-        page: page,
+        page,
         className: 'ms-List-page',
         key: page.key,
         ref: (newRef: unknown) => {
@@ -552,8 +561,8 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
     // first 30 items did not change, we still re-rendered all of them in this props.items change.
     if (usePageCache && page.startIndex === 0) {
       this._pageCache[page.key] = {
-        page: page,
-        pageElement: pageElement,
+        page,
+        pageElement,
       };
     }
     return pageElement;
@@ -983,7 +992,7 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
     // console.log('materialized: ', materializedRect);
     return {
       ...state,
-      pages: pages,
+      pages,
       measureVersion: this._measureVersion,
     };
   }
@@ -1009,16 +1018,16 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
       const { height = this._getPageHeight(itemIndex, visibleRect, itemCount) } = pageData;
 
       return {
-        itemCount: itemCount,
-        height: height,
+        itemCount,
+        height,
         data: pageData.data,
         key: pageData.key,
       };
     } else {
       const itemCount = this._getItemCountForPage(itemIndex, visibleRect);
 
       return {
-        itemCount: itemCount,
+        itemCount,
         height: this._getPageHeight(itemIndex, visibleRect, itemCount),
       };
     }
@@ -1063,13 +1072,13 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
 
     return {
       key: pageKey,
-      startIndex: startIndex,
+      startIndex,
       itemCount: count,
-      items: items,
-      style: style,
+      items,
+      style,
       top: 0,
       height: 0,
-      data: data,
+      data,
       isSpacer: isSpacer || false,
     };
   }
@@ -1146,9 +1155,9 @@ function _expandRect(rect: IRectangle, pagesBefore: number, pagesAfter: number):
   const height = rect.height + (pagesBefore + pagesAfter) * rect.height;
 
   return {
-    top: top,
+    top,
     bottom: top + height,
-    height: height,
+    height,
     left: rect.left,
     right: rect.right,
     width: rect.width,