[BUG] - Input inside Dropdown as DropdownItem doesn't recognize whitespaces

[Vishvsalvi]

HeroUI Version

2.7.8

Describe the bug

When you use Input inside DropdownItem, hit spacebar, the whitespace is not accepted.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Use this code to reproduce the issue

"use client"
import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, Input, Card} from "@heroui/react";  
import { useState, useEffect, useRef } from "react";

export default function App() {
    const [isOpen, setIsOpen] = useState(false);
    const [submitted, setSubmitted] = useState(false);
    const [value, setValue] = useState("")
    const inputRef = useRef<HTMLInputElement>(null);
    useEffect(() => {
        if (isOpen && !submitted && inputRef.current) {
          setTimeout(() => {
            inputRef.current?.focus();
          }, 100);
        }
      }, [isOpen, submitted]);

  return (
    <Dropdown
    isOpen={isOpen} 
    onOpenChange={setIsOpen}
    closeOnSelect={false}
    >
      <DropdownTrigger>
        <Button variant="bordered">Open Menu</Button>
      </DropdownTrigger>
      <DropdownMenu aria-label="Static Actions">
        <DropdownItem key="new">New file</DropdownItem>
        <DropdownItem key="copy">
      <Input
         className="w-full text-sm"
         variant="bordered"
         placeholder="Precio máximo"
         type="text"
         value={value}
         description="Enter your name"
         onChange={(e) => setValue(e.target.value)}
         ref={inputRef}
         />
         
        </DropdownItem>
        <DropdownItem key="edit">Edit file</DropdownItem>
        <DropdownItem key="delete" className="text-danger" color="danger">
          Delete file
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

Expected behavior

I expect normal Input behaviour which recognize whitespaces

Screenshots or Videos

Operating System Version

Windows

Browser

Chrome

[linear]

ENG-2472 [BUG] - Input inside Dropdown as DropdownItem doesn't recognize whitespaces

[Vishvsalvi]

@wingkwong please assign this to me if no one is considering working on it

[Vishvsalvi]

@wingkwong this issue persist in the React Aria library's ListBoxItem component which I believe is used build HeroUI's DropdownItem, MenuItem.

I implemented a simple editable div and normal html input inside React Aria's ListBoxItem, it displayed same bug. HeroUI's Input component has no bugs

<ListBox>
  <ListBoxItem>
   <div
      ref={divRef}
      contentEditable={isEditable}
      onDoubleClick={handleDoubleClick}
      onBlur={handleBlur}
      style={{
        border: '1px solid #ccc',
        padding: '10px',
        width: '300px',
        minHeight: '50px',
        cursor: 'pointer',
      }}
      suppressContentEditableWarning={true}
    >
      Double-click to edit this text.
    </div>
  </ListBoxItem>

  <ListBoxItem>
<input type="text" />
  </ListBoxItem>
  <ListBoxSection>
    <Header />
    <ListBoxItem />
  </ListBoxSection>
</ListBox>