[BUG] - Autocomplete and Select in Popover is buggy

[Aryan-mor]

NextUI Version

2.4.0

Describe the bug

When I use Autocomplete and Select in a Popover and then select an item, the Popover closes, causing me to lose the state of the theme. The Popover should remain open when I choose an item from Autocomplete or Select.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Click on Popover
2. Click on the Autocomplete inside the Popover
3. Select an item from the Autocomplete

Expected behavior

After selecting an item from Autocomplete or Select, only that list should close, and the Popover should remain open.

Screenshots or Videos

Recording.2024-05-30.140544.mp4

But it works on V2.3.6
You can see the same actions with NextUi V2.3.6 in this video

Recording.2024-05-30.141745.mp4

Operating System Version

windows

Browser

Edge

[linear]

ENG-926 [BUG] - Autocomplete and Select in Popover is buggy

[sauravhathi]

I am facing the similar issue

when I use Select or AutoComplete in a modal

I am not able to select an item using the mouse, and clear is also not working

Version 2.3.6 was working, but after updating to 2.4.0, it is not working. Rolling back to version 2.3.6 also does not work anymore.

[wingkwong]

Rolling back to version 2.3.6 also does not work anymore.

@sauravhathi you may remove your node_modules and reinstall.

[sauravhathi]

@wangly19 i tryed many times but not wokring

When I select items using the mouse, it's not working, but when I try using Enter, it's working.

I prefer if you could try Select or AutoComplete in a modal you'll face same issue in 2.3.6 and 2.4.0

[Aryan-mor]

@sauravhathi
Did you remove ^ from the start of the version?

[sauravhathi]

@Aryan-mor
Thanks! It works

[pdevito3]

yup, just ran into this as well (after banging my head against the wall for a while so thanks for the sanity check with this ticket)

after running through the 2.4 release notes, my best guess of the cause is a regression in this popover PR cc @wingkwong

[wingkwong]

@pdevito3 yes i'm working on it. sorry for any inconvenience caused.

[pdevito3]

All good! Appreciate the support and all the contributions 🍻

[laneme]

When the Select is used inside a modal, I cannot select an item (even the hover effect doesn't show up).
Not sure how much related but i'll drop my drawer component. (i can reproduce it within this drawer.)

import * as Dialog from '@radix-ui/react-dialog'
import { ReactNode } from 'react'
import { cn } from '../../lib/utils/misc'
import { UseDisclosureProps } from '@nextui-org/react'

export default function Drawer(props: {
   trigger: ReactNode
   children: ReactNode
   className?: string
   disclosure?: UseDisclosureProps
}) {
   return (
      <Dialog.Root {...props.disclosure} open={props.disclosure?.isOpen}>
         <Dialog.Trigger asChild>{props.trigger}</Dialog.Trigger>

         <Dialog.Overlay className="!fixed z-30 inset-0 bg-black/40 flex justify-end " />
         <Dialog.Content
            className={cn(
               '!fixed inset-y-0 right-0 h-dvh w-full max-w-4xl p-10 py-12 bg-white z-30 focus:outline-none overflow-y-auto',
               props.className,
            )}
         >
            {props.children}
         </Dialog.Content>
      </Dialog.Root>
   )
}