箭头键滚动在带有反应窗口的反应选择中不起作用

Question

问题：箭头键滚动在带有反应窗口的反应选择中不起作用 我遇到一个问题，在实现虚拟化的反应窗口时，无法使用向上和向下箭头键滚动反应选择下拉列表。然而，当不使用react-window时，滚动可以正常工作。

代码片段：具有虚拟化的菜单列表

const MenuList = React.memo(({ options, children, maxHeight, getValue }) => {
  const [value] = getValue();
  const height = Math.min(children.length * 40, maxHeight);
  const initialOffset = options.indexOf(value) * 40;

  return (
    <List
      height={options.length >= 8 ? maxHeight : height}
      itemCount={children.length}
      itemSize={40}
      initialScrollOffset={initialOffset}
      width="100%"
    >
      {({ index, style }) => <div style={style}>{children[index]}</div>}
    </List>
  );
});

Answer 1

import React, { useRef } from "react";
import Select, { components } from "react-select";
import { FixedSizeList as List } from "react-window";

// Sample options for the dropdown
const options = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
  // Add more options to test scrolling and virtualization
];

// Custom MenuList component using react-window
const MenuList = (props) => {
  const { options, children, maxHeight, getValue } = props;
  const height = 35; // Height of each option
  const [value] = getValue();
  const initialOffset = options.findIndex(
    (option) => option.value === value?.value
  );

  // Reference for list to manage scrolling
  const listRef = useRef();

  return (
    <List
      height={maxHeight} // Set the height of the dropdown
      itemCount={children.length} // Number of items to display
      itemSize={height} // Height of each item
      initialScrollOffset={initialOffset * height} // Scroll to the selected value
      ref={listRef}
    >
      {({ index, style }) => (
        <div style={style}>
          {children[index]} {/* Render each option */}
        </div>
      )}
    </List>
  );
};

const CustomSelect = () => (
  <Select
    options={options} // Pass your options
    components={{ MenuList }} // Override the MenuList component
  />
);

export default CustomSelect;


Try this way.