Issues using virtual on ComoboBox

[David52920]

I am having two issues with the virtual ComoBox; i've opted to just use normal css instead of tailwind.

Framework: React
Version: @headlessui/react": "^2.2.0

1. Scrolling issue when you have mouse inside of the ComoboBoxOptions dropdown and use scroll wheel; the scrolling glitches and keeps restarting. Its fine if you directly use the scrollbar up and down arrows or use scroll wheel while hovered on the scrollbar itself.

2. I am unable to change hover on the focused option; when looking at the inspect tool; all options have the data-active/data-focus attributes.

.combobox-option[data-focus] {
    background-color: var(--mi-red-hover);
}

Has anyone came across these issues and possibly have a fix for it?

Usage:

    <ComboBox
      isDisabled={false}
      placeholder="Test PlaceHolder"
      options={[
        { value: "Y", label: "Yes" },
        { value: "N", label: "No" },
      ]} />

ComoboBox:

import React, { useRef, useState } from "react";
import {
    Combobox,
    ComboboxButton,
    ComboboxInput,
    ComboboxOption,
    ComboboxOptions,
} from "@headlessui/react";
import { HiCheck, HiChevronDown } from "react-icons/hi";
import { RxDividerVertical } from "react-icons/rx";
import "./ComboBox.scss";


const ComboBox = (
    {
        id,
        options = [],
        placeHolder = "",
        isDisabled = false
    }
) => {
    const containerRef = useRef(null);
    const [query, setQuery] = useState("");
    const [selected, setSelected] = useState(null);

    const filteredData =
        query === ""
            ? options
            : options.filter((item) =>
                item.label.toLowerCase().includes(query.toLowerCase())
                //item[valueColumn].toLowerCase().includes(query.toLowerCase())
            );

    return (
        <div ref={containerRef} className="combobox-wrapper">
            <Combobox
                disabled={isDisabled}
                value={selected}
                virtual={{ options: filteredData }}
                onChange={(value) => setSelected(value)}
                as="div"
                className="combobox"
            >
                <div id={id} className="combobox-input-wrapper">
                    <ComboboxInput

                        className="combobox-input"
                        placeholder={placeHolder}
                        displayValue={(item) => (item ? item : "")}
                        onChange={(event) => setQuery(event.target.value)}
                    />
                    <ComboboxButton className="combobox-button">
                        <RxDividerVertical className="comobobox-dropdown-vertical-icon" />
                        <HiChevronDown className="comobobox-dropdown-icon" />
                    </ComboboxButton>
                </div>
                {filteredData.length > 0 && (
                    <ComboboxOptions
                        className="combobox-options"
                        anchor={{ to: 'bottom', offset: 28, gap: 5 }}
                        style={{ width: `${containerRef.current ? containerRef.current.offsetWidth : 300}px` }}
                    >
                        {({ option: item }) => (
                            <ComboboxOption
                                className="combobox-option"
                                key={item.value}
                                value={item.label}>
                                {({ selected }) => (
                                    <>
                                        {selected && <HiCheck className="check-icon" />}
                                        <span className="option-text">{item.label}</span>
                                    </>
                                )}
                            </ComboboxOption>
                        )}
                    </ComboboxOptions>
                )}

                {filteredData.length === 0 && (
                    <div className="combobox-no-results">No options found.</div>
                )}
            </Combobox>
        </div>
    );
};

export default ComboBox;

CSS:

:root {
    --mi-red: #d6001c;
    --mi-red-hover: #f0aeaee9;
  }
  

.combobox-wrapper {
    position: relative;
    background-color: white;
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 5px;
}

.combobox-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    width:300px;
}

.combobox-input {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 5px;
    background-color: white;
    font-size: 16px;
}

.combobox-button {
    background: none;
    min-width: 50px !important;
    border: none;
    cursor: pointer;
    padding: 0 4px;
    background-color: white;
    color: black;
}

.combobox-options {
    position: absolute;
    top: 100%;
    left: 0;
    max-height: 200px !important;
    overflow-y: auto;
    border: 1px solid #ccc;
    background: white;
    border-radius: 4px;
    margin-top: 1px;
    z-index: 2000;
}

.combobox-option {
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    width:100%;
}
.combobox-option[data-focus] {
    background-color: var(--mi-red-hover);
}

.check-icon {
    color: black;
    visibility: hidden;
}
.combobox-option[aria-selected="true"] {
    background-color: var(--mi-red);
}
.combobox-option[aria-selected="true"] .check-icon {
    visibility: visible;
}

.comobobox-dropdown-icon{
    color: black;
}
.comobobox-dropdown-vertical-icon{
    color: lightgray;
}
.combobox-no-results {
    position: absolute;
    padding: 8px;
    text-align: center;
    color: gray;
}