[BUG] - Dropdown component don't hide when click again to hide

[thuannguyenhuu11]

NextUI Version

2.6.11

Describe the bug

• I used the dropdown component of NextUI to create a custom selected language. In desktop UI, when I click the component, it show modal, and click again, it will hide component normally.
• But in responsive moblie UI, when I click to hide the modal don't disapper and reload like in the video I attached.
• I hope everyone can help me with this error.

Your Example Website or App

1...

Steps to Reproduce the Bug or Issue

1...

Expected behavior

As a user, I want mobile can fix that bug

Screenshots or Videos

Screen-Recording.mp4

Operating System Version

Mobile responsive

Browser

Edge

[linear]

ENG-1835 [BUG] - Dropdown component don't hide when click again to hide

[wingkwong]

can you share your dropdown code or even a sandbox? I couldn't reproduce it with a basic dropdown.

[thuannguyenhuu11]

can you share your dropdown code or even a sandbox? I couldn't reproduce it with a basic dropdown.

My select-language.tsx :

"use client";

import type React from "react";

import reactI18n from "~/config/i18n/react-i18n";
import { useLanguageStore } from "~/shared/hooks";

import CustomSelect from "./custom-select";

const SelectLanguage = () => {
	const { language, setLanguage } = useLanguageStore();

	const handleChangeLanguage = (
		event: React.ChangeEvent<HTMLSelectElement>,
	) => {
		const { value } = event.target;
		setLanguage(value);
		reactI18n.changeLanguage(value).catch(() => {});
	};

	return (
		<CustomSelect
			value={language}
			onChange={handleChangeLanguage}
			defaultSelectedKeys={[language]}
			disallowEmptySelection
			classNames={{ label: "text-sm font-semibold text-secondary" }}
			options={[
				{ key: "en", value: "English" },
				{ key: "vi", value: "Tiếng Việt" },
			]}
		/>
	);
};

export default SelectLanguage;

[thuannguyenhuu11]

My custome-select.tsx:

"use client";

import type React from "react";
import {
	type FieldError,
	type FieldErrorsImpl,
	type Merge,
	type UseFormRegisterReturn,
} from "react-hook-form";
import { useTranslation } from "react-i18next";
import {
	extendVariants,
	Select,
	SelectItem,
	type SelectProps,
} from "@nextui-org/react";
import clsx from "clsx";

import reactI18n from "~/config/i18n/react-i18n";

const BaseCustomSelect = extendVariants(Select, {
	variants: {
		color: {
			custom: {
				trigger:
					"border border-color-medium rounded bg-lighter focus-within:ring-4 focus-within:ring-blue-10 focus-within:border-blue-90",
				value: "text-primary text-sm font-normal",
				content:
					"rounded-lg border border-color-medium shadow-s-light-b-strong",
				label: "text-light font-semibold text-xs",
				listbox: "text-secondary text-xs font-normal",
			},
		},
	},
	defaultVariants: {
		color: "custom",
		size: "md",
	},
	compoundVariants: [
		{
			color: "custom",
		},
	],
});

type SelectItemElement = React.ReactElement<
	React.ComponentProps<typeof SelectItem>
>;

interface CustomSelectProps extends Omit<SelectProps, "children"> {
	options?: {
		key: string | number;
		value: string | number;
		[key: string]: string | number;
	}[];
	validationErrorMessage?:
		| string
		| FieldError
		| Merge<FieldError, FieldErrorsImpl>
		| undefined;
	children?: SelectItemElement | SelectItemElement[];
	register?: UseFormRegisterReturn;
}

const CustomSelect: React.FC<CustomSelectProps> = ({
	options,
	validationErrorMessage,
	children,
	labelPlacement = "outside",
	register,
	disabledKeys,
	...props
}) => {
	const { t } = useTranslation("validations", { i18n: reactI18n });

	return (
		<div className="flex flex-col">
			<BaseCustomSelect
				disabledKeys={disabledKeys}
				{...props}
				{...{ ...register, ref: undefined }}
				labelPlacement={labelPlacement}
				classNames={{
					trigger: clsx({
						"border-red-20 focus-within:ring-red-10 focus-within:border-red-90 bg-red-10":
							validationErrorMessage,
					}),
					...props.classNames,
				}}
				isRequired={false}
			>
				{options?.map((option) => (
					<SelectItem key={option.key} value={option.key}>
						{option.value}
					</SelectItem>
				))}
			</BaseCustomSelect>
			{validationErrorMessage && (
				<p className="mt-1 text-xs font-normal text-danger">
					{t(String(validationErrorMessage))}
				</p>
			)}
		</div>
	);
};

export default CustomSelect;

[Rahulvvsv]

Please assign this bug to me