带有 react-virtuoso 的 Material UI 自动完成虚拟化

Question

我有一个几乎可以工作的Material UI Autocomplete 实现，下拉列表用react-virtuoso 虚拟化。

我目前看到的问题是，当向上导航时（the video 中的 0:25），尽管组件似乎认为它向上移动，但列表不会越过最顶部的项目。

列表似乎在内部向上移动，但 gui 并未更新以反映这一点。这在按 ⬆️ 后按 ⬇️ 时很明显：它需要与 ⬆️ 一样多的 ⬇️ 's 在最上面的项目再次突出显示之前。预期的行为是像使用非虚拟化列表一样向上滚动，不确定这是 react-virtuoso 设置的问题，还是自动完成组件的问题，或者此设置结合了两者。

可以在this GitHub issue 或直接在here 中找到有关此问题的视频。

谢谢！

编辑：这是问题的代码框：https://codesandbox.io/s/material-demo-forked-r6i2y?file=/demo.tsx

Answer 1

我正在使用 Virtuoso 进行 mui 自动完成，只是为了一个简单的用例，我不支持组和东西，但不难添加到代码中。我唯一要做的就是提供一个自定义 ListboxComponent..我唯一要做的就是从父级获取计算的 maxHeight，因为我无法弄清楚如何在调整大小时使高度正常工作

const ListboxComponent = forwardRef<HTMLUListElement>(({ children, ...rest }, ref) => {
  const data = children as ReactElement[];
  const localRef = useRef<string>('200px');

  return (
    <ul
      ref={reference => {
        const maxHeight = reference ? getComputedStyle(reference).maxHeight : null;
        if (maxHeight && maxHeight !== localRef.current) {
          localRef.current = maxHeight;
        }

        if (typeof ref === 'function') {
          ref(reference);
        }
      }}
      {...rest}
    >
      <Virtuoso
        style={{ height: localRef.current }}
        data={data}
        itemContent={(index, child) => {
          return cloneElement(child, { index });
        }}
      />
    </ul>
  );
}) as ComponentType<HTMLAttributes<HTMLElement>>;