Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] - Input inside AccordionItem requires 2 clicks to focus #4981

Open
petersamokhin opened this issue Mar 5, 2025 · 5 comments
Open

[BUG] - Input inside AccordionItem requires 2 clicks to focus #4981

petersamokhin opened this issue Mar 5, 2025 · 5 comments
Labels
📦 Scope : Components Related to the components 🐛 Type: Bug Something isn't working

Comments

@petersamokhin
Copy link

petersamokhin commented Mar 5, 2025

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

Copy link

linear bot commented Mar 5, 2025

@PoetAndPoem4Hu
Copy link

not reproduce in the sandbox provided

@petersamokhin
Copy link
Author

@PoetAndPoem4Hu strange, because it's reproducible to me. Please see the video:

video.mp4

@wingkwong
Copy link
Member

I think it happens when there is selectedKeys={selectedKeys}. In your given sandbox, this prop doesn't exist.

@wingkwong wingkwong added 🐛 Type: Bug Something isn't working 📦 Scope : Components Related to the components labels Mar 6, 2025
@petersamokhin
Copy link
Author

@wingkwong yeah, you're right, I likely forgot to save the sandbox after edits — now fixed.
The code snippet here in the original message was correct though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📦 Scope : Components Related to the components 🐛 Type: Bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants