AccordionItem with hover

[hkaya15]

On docs AccordionItem has the following attributes on the base element. I would like to open accordion item with onHover. How can I do that?

[alphaxek]

Hi @hkaya15, Currently Accordion can only be opened with onClick event.
Please mark it as answered if this answers your query, thanks.

[wingkwong]

@hkaya15 There's no onHover. Here's a workaround to use controlled with onMouseOver. However, setSelectedKeys will be called multiple times once you move over on the accordionItem.

accordionitem-onmouseover-demo.webm

Here's the code for your reference. It was modified based on controlled one in docs.

const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["1"]));
  
return (
  <div className="flex flex-col gap-4">
    <Accordion {...args} selectedKeys={selectedKeys}>
      <AccordionItem
        key="1"
        aria-label="Accordion 1"
        title="Accordion 1"
        onMouseOver={() => setSelectedKeys(new Set("1"))}
      >
        {defaultContent}
      </AccordionItem>
      <AccordionItem
        key="2"
        aria-label="Accordion 2"
        title="Accordion 2"
        onMouseOver={() => setSelectedKeys(new Set("2"))}
      >
        {defaultContent}
      </AccordionItem>
      <AccordionItem
        key="3"
        aria-label="Accordion 3"
        title="Accordion 3"
        onMouseOver={() => setSelectedKeys(new Set("3"))}
      >
        {defaultContent}
      </AccordionItem>
    </Accordion>
  </div>
);

[hkaya15]

Thank you @wingkwong.