UPDATED WITH VIDEO: Combobox: keyboard navigation skipping options?

[jacobwilson41]

Screen.Recording.2025-07-23.at.7.26.00.AM.mov

The video shows me navigating the combobox options by pressing the up and down arrow keys. For each key press, you can see the selected (data-selected) combobox option moving down the list but skipping every other option. The console logs show the combobox.selectedIndex incrementing/decrementing by 2 for every 1 arrow key press further indicating that options are getting skipping with arrow key presses.

Here's the source code: Spot anything I'm doing wrong?

import { RecordCard, useBase, useRecords } from "@baselift/blocks/ui";
import { Combobox, ScrollArea, useCombobox } from "@mantine/core";
import { useEffect, useMemo, useState } from "react";
import AddRecordButton from "./add-record-button";

type Props = {
  tableNameOrId: string;
  selectedRecordIds?: string[];
  onAddRecord: (recordId: string) => void;
  trigger?: React.ReactNode;
};

const selectedRecordsFallback: string[] = [];

export default function RecordPicker({ tableNameOrId, selectedRecordIds = selectedRecordsFallback, onAddRecord, trigger }: Props) {
  const base = useBase();
  const table = base.getTable(tableNameOrId);
  const records = useRecords(table);

  const [searchValue, setSearchValue] = useState("");
  const combobox = useCombobox({
    onDropdownClose: () => {
      combobox.resetSelectedOption();
      combobox.focusTarget();
      setSearchValue("");
    },
    onDropdownOpen: () => {
      combobox.focusSearchInput();
    },
  });

  const handleAddRecord = (recordId: string) => {
    onAddRecord(recordId);
    combobox.closeDropdown();
  };

  // Filter out already selected records and apply search filter
  const availableRecords = useMemo(() => {
    const unselected = records.filter(record => !selectedRecordIds.includes(record.id));
    if (!searchValue) {
      return unselected;
    }

    return unselected.filter(record =>
      record.name.toLowerCase().includes(searchValue.toLowerCase()),
    );
  }, [records, selectedRecordIds, searchValue]);

  useEffect(() => {
    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
        console.log("combobox.getSelectedOptionIndex(): ", combobox.getSelectedOptionIndex());
      }
    }

    window.addEventListener("keydown", handleKeyDown);

    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [combobox]);

  const options = availableRecords.map((record, idx) => (
    <Combobox.Option
      data-index={idx}
      key={record.id}
      value={record.id}
      className="data-combobox-selected:bg-(--mantine-color-blue-light-hover)"
    >
      <RecordCard record={record} onClick={() => null} className="shadow-none! bg-transparent!" />
    </Combobox.Option>
  ));

  useEffect(() => {
    // we need to wait for options to render before we can select first one
    combobox.selectFirstOption();
  }, [searchValue]);

  return (
    <Combobox
      store={combobox}
      resetSelectionOnOptionHover
      onOptionSubmit={handleAddRecord}
      shadow="xl"
      radius="md"
      dropdownPadding={8}
      withinPortal={false}
    >
      <Combobox.DropdownTarget>
        <div className="max-w-fit" onClick={() => combobox.toggleDropdown()}>
          {trigger || <AddRecordButton />}
        </div>
      </Combobox.DropdownTarget>

      <Combobox.Dropdown classNames={{ dropdown: "min-w-[600px]" }}>
        <Combobox.EventsTarget autoComplete="off">
          <Combobox.Search
            classNames={{ input: "border-0" }}
            radius="md"
            value={searchValue}
            onChange={(event) => {
              combobox.updateSelectedOptionIndex();
              setSearchValue(event.currentTarget.value);
            }}
            placeholder="Search placement types..."
          />
        </Combobox.EventsTarget>
        <Combobox.Options>
          <ScrollArea.Autosize mah={300} type="scroll">
            {options.length > 0
              ? (
                  options
                )
              : (
                  <Combobox.Empty>No placement types found</Combobox.Empty>
                )}
          </ScrollArea.Autosize>
        </Combobox.Options>
      </Combobox.Dropdown>
    </Combobox>
  );
}

[rtivital]

I cannot help based on the provided materials. Please make sure that question is more concise and contains all relevant attachments.

[jacobwilson41]

@rtivital okay I was able to upload the video now, hopefully that will help make the problem clearer