diff --git a/src/Overflow.tsx b/src/Overflow.tsx index de6241b..5ace08b 100644 --- a/src/Overflow.tsx +++ b/src/Overflow.tsx @@ -302,7 +302,19 @@ function Overflow( // ================================ Render ================================ const displayRest = restReady && !!omittedItems.length; - let suffixStyle: React.CSSProperties = {}; + const isFullySSRResponsiveFirstRender = + fullySSR && shouldResponsive && containerWidth === null; + const fullySSRFirstRenderStyle: React.CSSProperties = { + maxWidth: 0, + padding: 0, + margin: 0, + borderWidth: 0, + overflowX: 'hidden', + }; + + let suffixStyle: React.CSSProperties = isFullySSRResponsiveFirstRender + ? fullySSRFirstRenderStyle + : {}; if (suffixFixedStart !== null && shouldResponsive) { suffixStyle = { position: 'absolute', @@ -316,13 +328,22 @@ function Overflow( responsive: shouldResponsive, component: itemComponent, invalidate, + style: isFullySSRResponsiveFirstRender + ? fullySSRFirstRenderStyle + : undefined, }; // >>>>> Choice render fun by `renderRawItem` const internalRenderItemNode = renderRawItem ? (item: ItemType, index: number) => { const key = getKey(item, index); - + const isIdxCheckPass = index <= mergedDisplayCount; + // in `ssr="full"` case, item's `display` will be set to `true` when either condition is met: + // 1) at initial render; 2) its corresponding width is valid and pass the index check + const shouldDisplay = fullySSR + ? isFullySSRResponsiveFirstRender || + (isIdxCheckPass && getItemWidth(index) > 0) + : isIdxCheckPass; return ( ( item, itemKey: key, registerSize, - display: index <= mergedDisplayCount, + display: shouldDisplay, }} > {renderRawItem(item, index)} @@ -341,7 +362,13 @@ function Overflow( } : (item: ItemType, index: number) => { const key = getKey(item, index); - + const isIdxCheckPass = index <= mergedDisplayCount; + // in `ssr="full"` case, item's `display` will be set to `true` when either condition is met: + // 1) at initial render; 2) its corresponding width is valid and pass the index check + const shouldDisplay = fullySSR + ? isFullySSRResponsiveFirstRender || + (isIdxCheckPass && getItemWidth(index) > 0) + : isIdxCheckPass; return ( ( renderItem={mergedRenderItem} itemKey={key} registerSize={registerSize} - display={index <= mergedDisplayCount} + display={shouldDisplay} /> ); }; diff --git a/tests/__snapshots__/ssr.spec.tsx.snap b/tests/__snapshots__/ssr.spec.tsx.snap index 494b349..e7cc6f9 100644 --- a/tests/__snapshots__/ssr.spec.tsx.snap +++ b/tests/__snapshots__/ssr.spec.tsx.snap @@ -6,20 +6,20 @@ exports[`Overflow.SSR basic 1`] = ` >
Label 0
Label 1