[BUG] - Select - listbox with options are not hiding after input click

[DanielMarkowski]

NextUI Version

2.3.6

Describe the bug

The listbox with options is shown after clicking on the select input for the first time but when I try to click the input a second time the options are not hiding like in the examples on the nextui website.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Follow the instructions installation guide and install an empty project -> here https://nextui.org/docs/guide/installation
2. Add "@nextui-org/select": "2.1.27" to package.json and run npm i
3. Create client component with the code from this example https://nextui.org/docs/components/select#usage
4. Put this component on some page to be rendered
5. Run the app and click the select input couple of times

Expected behavior

The listbox options should be shown and hidden when the user clicks on the select input.

Screenshots or Videos

select-test.mov

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-837 [BUG] - Select - listbox with options are not hiding after input click

[DanielMarkowski]

Full dependencies list:

"dependencies": {
	"@nextui-org/button": "^2.0.31",
	"@nextui-org/code": "^2.0.27",
	"@nextui-org/input": "^2.1.21",
	"@nextui-org/kbd": "^2.0.28",
	"@nextui-org/link": "^2.0.29",
	"@nextui-org/navbar": "^2.0.30",
	"@nextui-org/snippet": "^2.0.35",
	"@nextui-org/switch": "^2.0.28",
	"@nextui-org/system": "2.1.0",
	"@nextui-org/theme": "2.2.0",
	"@nextui-org/select": "2.1.27",
	"@react-aria/ssr": "^3.9.2",
	"@react-aria/visually-hidden": "^3.8.10",
	"@types/node": "20.5.7",
	"@types/react": "18.2.21",
	"@types/react-dom": "18.2.7",
	"autoprefixer": "10.4.19",
	"clsx": "^2.0.0",
	"eslint": "8.48.0",
	"eslint-config-next": "14.2.1",
	"framer-motion": "^11.1.1",
	"intl-messageformat": "^10.5.0",
	"next": "14.2.1",
	"next-themes": "^0.2.1",
	"postcss": "8.4.38",
	"react": "18.2.0",
	"react-dom": "18.2.0",
	"tailwind-variants": "^0.1.20",
	"tailwindcss": "3.4.3",
	"typescript": "5.0.4"
}

Test component:

"use client"

import {Select, SelectItem} from "@nextui-org/select";
import React from "react";

export default function SelectTest() {
	const animals = [
		{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
		{label: "Dog", value: "dog", description: "The most popular pet in the world"},
		{label: "Elephant", value: "elephant", description: "The largest land animal"},
		{label: "Lion", value: "lion", description: "The king of the jungle"},
		{label: "Tiger", value: "tiger", description: "The largest cat species"},
    ]

	return (
		<>
			<div className="flex w-full flex-col gap-2 my-6">
				<Select
					items={animals}
					label="Favorite Animal"
					placeholder="Select an animal"
					className="max-w-xs"
				>
					{(animal) => <SelectItem key={animal.value}>{animal.label}</SelectItem>}
				</Select>
			</div>
		</>
	);
}

[wingkwong]

I could reproduce the issue on latest production version but not on canary branch. probably it has been resolved. Putting on hold on this issue first to check again after the next bug fix release.

[rayaanr]

Facing same issue, please resolve this ASAP

[razvanilin]

Facing same issue, please resolve this ASAP

@rayaanr Fix your attitude ASAP

[rayaanr]

Facing same issue, please resolve this ASAP

@rayaanr Fix your attitude ASAP

@razvanilin Why bro? Whats wrong 🧐

I just asked to fix it as soon as possible, with "please", anything wrong in there?

[razvanilin]

@rayaanr commenting that comes across as demanding and unappreciative of the maintainers' time and effort. Instead you could offer more information or help resolve the issue. ASAP is considered impolite in any professional context

[wingkwong]

Cool it guys. The issue has been fixed and the next release will be coming soon. We postpone it because there is a still few large PRs that need more time to review. Thank you for your patience and please stay tuned.

[rayaanr]

@rayaanr commenting that comes across as demanding and unappreciative of the maintainers' time and effort. Instead you could offer more information or help resolve the issue. ASAP is considered impolite in any professional context

@razvanilin, I didn't mean to sound demanding, and I apologize if it came across that way. @wingkwong thanks for the update.

[wingkwong]

Closing - please use the latest version (v2.4.0)

[DanielMarkowski]

Works like a charm on 2.4.0. Thx @wingkwong