Skip to content

Commit

Permalink
close on clicking on single select option
Browse files Browse the repository at this point in the history
  • Loading branch information
UdaySagar-Git committed Feb 22, 2024
1 parent 68cb138 commit a7a3a0a
Showing 2 changed files with 15 additions and 3 deletions.
2 changes: 1 addition & 1 deletion src/Common/constants.tsx
Original file line number Diff line number Diff line change
@@ -272,7 +272,7 @@ export const REVIEW_AT_CHOICES: Array<OptionsType> = [
];

export const SYMPTOM_CHOICES = [
{ id: 1, text: "ASYMPTOMATIC" },
{ id: 1, text: "ASYMPTOMATIC", isSingleSelect: true },
{ id: 2, text: "FEVER" },
{ id: 3, text: "SORE THROAT" },
{ id: 4, text: "COUGH" },
16 changes: 14 additions & 2 deletions src/Components/Form/MultiSelectMenuV2.tsx
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import CareIcon from "../../CAREUI/icons/CareIcon";
import { DropdownTransition } from "../Common/components/HelperComponents";
import { Listbox } from "@headlessui/react";
import { classNames } from "../../Utils/utils";
import { ReactNode } from "react";
import { ReactNode, useRef } from "react";

type OptionCallback<T, R = void> = (option: T) => R;

@@ -66,6 +66,14 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
);
};

const buttonRef = useRef(null);

const handleSingleSelect = (o: any) => {
if (o.option?.isSingleSelect === true && buttonRef.current) {
buttonRef.current.click();
}
};

return (
<div className={props.className} id={props.id}>
<Listbox
@@ -83,7 +91,10 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
</Listbox.Label>
<div className="relative">
<div>
<Listbox.Button className="cui-input-base flex w-full rounded">
<Listbox.Button
className="cui-input-base flex w-full rounded"
ref={buttonRef}
>
<div className="relative z-0 flex w-full items-center">
<div className="relative flex flex-1 items-center pr-4 focus:z-10">
<p className="ml-2.5 text-sm font-normal text-gray-600">
@@ -109,6 +120,7 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
key={index}
className={dropdownOptionClassNames}
value={option}
onClick={() => handleSingleSelect(option)}
>
{({ active }) => (
<div className="flex flex-col gap-2">

0 comments on commit a7a3a0a

Please sign in to comment.