nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
21.93k stars 1.53k forks source link

[BUG] - Select component auto closes in flex layout #3695

Open h0wXD opened 2 months ago

h0wXD commented 2 months ago

NextUI Version

2.2.5

Describe the bug

Select not opening on either desktop or mobile after having selected a value. This seems to only happen in a flex layout when anything is rendered next to the select.

Example code snippet but can also be found on repro repo in the file https://github.com/h0wXD/nextui-select-issue/blob/master/src/components/Footer.tsx#L20

<div className="bg-black w-[400px] pt-3 pb-3 flex flex-row gap-2">
  <div className="flex flex-col grow">
    <Select
      items={days}
      label="Select a Day"
      className="w-[100%]"
      selectedKeys={Day ? [Day.key + ''] : []}
      onChange={handleSelectionChange}
    >
      {(day) => <SelectItem key={day.key}>{day.label}</SelectItem>}
    </Select>
  </div>
  <span className="flex flex-col justify-center">
    test
  </span>
</div>
</div>

Your Example Website or App

https://github.com/h0wXD/nextui-select-issue/

Steps to Reproduce the Bug or Issue

  1. yarn install
  2. yarn dev
  3. select any option in footer
  4. scroll
  5. select one of the lower options
  6. select auto closes and scrolls down page, unable to change option

Expected behavior

Expected the dropdown to be able to open and select value

Screenshots or Videos

https://github.com/user-attachments/assets/f198d241-1258-490e-8131-d514b4ade5b2

Operating System Version

Windows, Android

Browser

Chrome

linear[bot] commented 2 months ago

ENG-1305 [BUG] - Select component auto closes in flex layout

macci001 commented 2 months ago

I would like to work on this.

wingkwong commented 2 months ago

@macci001 assigned. suggest to check with other select issues / PRs first. I remember someone reported a similar issue.

macci001 commented 2 months ago

Okay, #3571 seems very similar issue. Nobody is working on this as far as I can see from the issue page.