import { useId, useRef, useState } from "react";
type Option = { name: string; value: string };
export const Dropdown = ({ name, value, options }: { name: string; value: string; options: Option[] }) => {
const [selectedOption, setSelectedOption] = useState<Option | null>(null);
const popoverId = useId();
const anchorName = `--anchor-${popoverId.replaceAll(":", "-")}`;
const popoverRef = useRef<HTMLDivElement>(null);
return (
<div>
<input type="hidden" name={name} value={value} />
<button
role="combobox"
type="button"
popoverTarget={popoverId}
popoverTargetAction="toggle"
style={{
anchorName,
}}
>
{selectedOption?.name}
</button>
<div
role="group"
popover="auto"
id={popoverId}
ref={popoverRef}
style={{
positionAnchor: anchorName,
}}
>
<div role="listbox">
{options.map((option) => (
<div key={option.value} role="listitem">
<button
role="option"
aria-selected={selectedItem === item}
onClick={() => {
setSelectedOption(option);
popoverRef.current!.hidePopover();
}}
>
<div>{option.name}</div>
</button>
</div>
))}
</div>
</div>
</div>
);
};
import { useId, useRef, useState } from "react";
type Option = { name: string; value: string };
export const Dropdown = ({ name, value, options }: { name: string; value: string; options: Option[] }) => {
const [selectedOption, setSelectedOption] = useState<Option | null>(null);
const popoverId = useId();
const anchorName = `--anchor-${popoverId.replaceAll(":", "-")}`;
const popoverRef = useRef<HTMLDivElement>(null);
return (
<div>
<input type="hidden" name={name} value={value} />
<button
role="combobox"
type="button"
popoverTarget={popoverId}
popoverTargetAction="toggle"
style={{
anchorName,
}}
>
{selectedOption?.name}
</button>
<div
role="group"
popover="auto"
id={popoverId}
ref={popoverRef}
style={{
positionAnchor: anchorName,
}}
>
<div role="listbox">
{options.map((option) => (
<div key={option.value} role="listitem">
<button
role="option"
aria-selected={selectedItem === item}
onClick={() => {
setSelectedOption(option);
popoverRef.current!.hidePopover();
}}
>
<div>{option.name}</div>
</button>
</div>
))}
</div>
</div>
</div>
);
};