Why is ScrollArea not working when testing with Vitest? | Mantine | Page 1

queen yew Sep 1, 2022, 5:15 AM

#

import { ScrollArea, List } from '@mantine/core';
import { Message } from '../Message';
import * as React from 'react';

export const MessagesList = () => {
  const viewport = React.useRef<HTMLDivElement | null>(null);

  React.useEffect(() => {
    if (viewport.current) {
      viewport.current.scrollTo({ top: viewport.current.scrollHeight });
    }
  }, [viewport.current]);

  return (
    <ScrollArea
      viewportRef={viewport}
      styles={{
        root: {
          height: '100%',
        },
        viewport: { flexGrow: 1, '& > div': { height: '100%' } },
      }}
    >
      <List listStyleType="none" pl="md" pt="md">
        <Message username="LouieMartin" text="Hello, world!" />
      </List>
    </ScrollArea>
  );
};