Material UI 自动完成虚拟化 w/react-virtuoso

Question

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

\n

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

\n

看起来内部列表正在向上移动，但 GUI 并未更新以反映这一点。\xe2\xac\x87\xef\xb8\x8f当按下 后按下时，这一点很明显：在最上面的项目再次突出显示之前，\xe2\xac\x86\xef\xb8\x8f需要尽可能多的\xe2\xac\x87\xef\xb8\x8f\' 。\xe2\xac\x86\xef\xb8\x8f预期的行为是像非虚拟化列表一样向上滚动，不确定这是否是react-virtuoso设置的问题，或者这是否是自动完成组件或结合两者的设置的问题。

\n

有关此问题的实际操作视频可以在此 GitHub 问题中或直接在此处找到。

\n

谢谢！

\n

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

\n

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>>;