HeroUI Version

2.7.4

Describe the bug

Inside a controlled accordion, any inputs require 2 clicks to become focused and to enter any text there.
It starts working if you click anywhere inside the accordion item.
If the item is controlled but initially collapsed, it works too, because to expand it, you actually have to click on the item, and it works then.

I tried checking some events propagation on the accordion or on the item, it didn't help.

Your Example Website or App

https://stackblitz.com/edit/qtnjgugf?file=App.jsx

Steps to Reproduce the Bug or Issue

1. Open the reproducible example on StackBlitz
2. Click on the input field
3. See nothing happens
4. Try to type something on keyboard
5. Nothing appears in the input field
6. Click again on the input field
7. Now it works

Expected behavior

I expect the input field to become focused from the 1st click

Minimal reproducible code (same as on StackBlitz)

import { useState } from 'react';
import { Accordion, AccordionItem, Input } from '@heroui/react';

export default function App() {
  const [selectedKeys] = useState(['1']);

  return (
    <Accordion selectedKeys={selectedKeys}>
      <AccordionItem
        key="1"
        aria-label="Controlled accordion"
        subtitle="See below. This item is initially expanded"
        title="Controlled accordion"
      >
        <Input label="Requires 2 clicks to input" />
      </AccordionItem>
    </Accordion>
  );
}

Operating System Version

macOS

Browser

Chrome, Safari and WebViews