Combobox useComboboxFilter and Virtualizer buggy

[tomwjerry]

I am trying to combine useComboboxFilter and Virtualizer, but it gets buggy. Did I do things wrong? Am I perhaps better off with plain CSS styles? I got issues such as negative indexes, invalid array length, options being mixed up, and so on. Here is a sample code:

const useStyles = makeStyles({
    listbox: {
        // maxHeight will be applied only positioning autoSize set.
        maxHeight: '250px'
    },
    option: {
        height: '32px'
    }
});

const {
        virtualizerLength,
        bufferItems,
        bufferSize,
        scrollRef,
        containerSizeRef,
    } = useStaticVirtualizerMeasure({
        defaultItemSize: itemHeight,
        direction: 'vertical',
        // We want at least 10 additional items on each side of visible
        // items for page up/down (+ 1 buffer)
        bufferItems: 4,
        // We need to recalculate index when at least 10 items (+1px)
        // from the bottom or top for page up/down
        bufferSize: itemHeight * 3 + 1,
});

const [options, setOptions] = React.useState([
  {id: 1, children: undefined, value: 'a', name: 'A'},
  {id: 2, children: undefined, value: 'b', name: 'B'},
  {id: 3, children: undefined, value: 'c', name: 'C'},
  {id: 4, children: undefined, value: 'd', name: 'D'},
  {id: 5, children: undefined, value: 'e', name: 'E'},
  {id: 6, children: undefined, value: 'f', name: 'F'},
  {id: 7, children: undefined, value: 'g', name: 'G'},
]);
const [query, setQuery] = React.useState<string>('');
const children = useComboboxFilter(query, options, {});

const styles = useStyles();

const onChanged = (event: SelectionEvents, data: OptionOnSelectData): void => {
        setQuery(data.optionText ?? '');
};

return (
<Combobox
      positioning={{ autoSize: false, position: 'below' }}
      listbox={{ ref: mergedRefs, className: styles.listbox }}
      onOpenChange={(e, data) => {
          clearScrollTimer();
          if (data.open) {
              setScrollTimer(() => {
                  mergedRefs.current?.scrollTo({
                      top: (itemHeight + rowGap) * selectedIndex.current,
                  });
              }, 0);
          }
      }}
      onOptionSelect={onChanged}
      onChange={(ev: React.ChangeEvent<HTMLInputElement>) => setQuery(ev.target.value)}
      value={query}
  >
      <Virtualizer
          numItems={children.length > 0 ? children.length : 0}
          virtualizerLength={virtualizerLength}
          bufferItems={bufferItems}
          bufferSize={bufferSize}
          itemSize={itemHeight}
          containerSizeRef={containerSizeRef}
          gap={rowGap}
      >
          {(index: number) => {
              if (index < 0 || index >= children.length ||
                  !children[index]
              ) {
                  return null;
              }
              return (
                <Option
                  className={styles.option}
                  aria-posinset={index}
                  aria-setsize={numberOfItems}
                  key={option[index].id}
                  value={option[index].id}
                >
                  { option[index].name }
                </Option>
            )
      }}
    </Virtualizer>
</Combobox>
);

[ValentinaKozlova]

Hey @tomwjerry, could you please create a repro using e.g. Stackblitz?

[tomwjerry]

Here is one example: https://stackblitz.com/edit/nhpsvt-tpt5l4wb

[tomwjerry]

Here is one example: https://stackblitz.com/edit/nhpsvt-tpt5l4wb

Also, this project is based upon it: https://github.com/tomwjerry/Fluent-UI-React-V9-PeoplePicker

[dmytrokirpa]

Thanks @tomwjerry for opening the issue microsoft/fluentui-contrib#513! We’ll check it out. I’m closing this discussion so we can keep all updates in the issue thread.