[BUG] - clicking endContent of the last listbox item selects the first

[myadream]

HeroUI Version

@heroui/react": "2.8.0-beta.6

Describe the bug

After adding a button component to the endContent of the ListboxItem element, clicking the button triggers a global click event, causing the first option of the ListboxItem to be unexpectedly selected.

import {useMemo, useState} from "react";
import {Button, Listbox, ListboxItem} from "@heroui/react";

export default function App() {
    const [selectedKeys, setSelectedKeys] = useState(new Set([""]));

    const selectedValue = useMemo(() => Array.from(selectedKeys).join(", "), [selectedKeys]);

    return (
        <div className="flex flex-col gap-2">
            <Listbox
                color={"primary"}
                disallowEmptySelection
                aria-label="Single selection example"
                selectedKeys={selectedKeys}
                selectionMode="single"
                variant="flat"
                onSelectionChange={(keys) =>setSelectedKeys(keys as Set<string>)}
            >
                <ListboxItem key="text" endContent={<Button>Text</Button>}>Text</ListboxItem>
                <ListboxItem key="number"  endContent={<Button>Number</Button>}>Number</ListboxItem>
                <ListboxItem key="date"  endContent={<Button>Date</Button>}>Date</ListboxItem>
                <ListboxItem key="single_date"  endContent={<Button>Single Date</Button>}>Single Date</ListboxItem>
                <ListboxItem key="iteration"  endContent={<Button>Iteration</Button>}>Iteration</ListboxItem>
            </Listbox>
            <p className="text-small text-default-500">Selected value: {selectedValue}</p>
        </div>
    );
}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. When arbitrarily clicking the button of any ListboxItem element other than the first one

Expected behavior

The ListboxItem is in an unselected state.

Screenshots or Videos

https://github.com/user-attachments/assets/c313d3c1-50b5-49d6-8377-3cf5e2da08fa

Operating System Version

win 11

Browser

Chrome

[linear[bot]]

ENG-2706 [BUG] - Listbox

[wingkwong]

1. please upgrade to the latest version and retry.
2. if it still fails, please share a sandbox.

[myadream]

In the current version "@heroui/react": "2.8.0-beta.6" @wingkwong

[myadream]

https://stackblitz.com/edit/cw71nneb-yfhshp6q?file=App.jsx

[myadream]

Clicking the tail button of the last item in the list triggers the issue.

[IsDyh01]

@wingkwong I think this is a mistake of useOption() in react-aria. If you include a focizable element such as a button in the list-item, when you click on this button, The focus is on the button instead of the list-item, so the isFocused of the useOption remains unchanged and is still the previous focused item.

[KumJungMin]

If this issue still persists, would it be okay for me to try submitting a fix? :)

[wingkwong]

@KumJungMin ya sure. you may take a look at IsDyh01's comment first to see if the fix needs to apply on react-aria or not.