next.jsantdreact-window

Windowing with Antd in Next.js breaks tooltips and popovers


I'm experimenting with the windowing technique in Next.js with Antd, and I made this simple app that has this index.tsx page:

import { CSSProperties } from 'react'
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import AutoSizer from 'react-virtualized-auto-sizer'
import { FixedSizeList as List } from 'react-window'
import { Card, Tooltip } from 'antd'

import data from '../data'

import styles from '../styles/Home.module.css'


const people = data();

const Row = ({ index, style }: { index: number, style?: CSSProperties }) => (
  <div style={style}>
    <Card bordered={true}>
      <p>{people[index].name}</p>
      <Tooltip title={`${Math.floor(people[index].age/15)} in dog years`}>
        <p>{people[index].age}</p>
      </Tooltip>
    </Card>
  </div>
)

const Home: NextPage = () => {
  return (
    <AutoSizer>
      {({ height, width }) => (
        <List
          height={height}
          itemCount={people.length}
          itemSize={100}
          width={width}
        >
          {Row}
        </List>
      )}
    </AutoSizer>
  )
}

export default Home

The FixedSizeList won't work until I add the following style in globals.css:

html, body, div {
  height: 100%;
}

However, when I do that, it breaks the Tooltip by Antd. Usually what happens is that when I hover above a relevant element, the tooltip appears for a split second with 100% height and then disappears and it doesn't appear anymore on a page no matter where I hover.

How can I solve this?


Solution

  • I finally found a solution after much agony.

    Apparently, Nextjs wraps the entire layout with a div with id __next. That's the outer-most container of the entire page, and its height is not set, so since the content of FixedSizeList is positioned such that it's outside of the regular page flow, the __next div gets a height of 0.

    I don't know if there is any better solution, but I simply added this little style in the globals.css file:

    div#__next {
      height: 100%;
    }

    That fixed the issue without forcing every other div in the page to have height at 100% (which includes the tooltips and popovers).