From 5b86002b55fdaa86605ccd333625de29a58113ab Mon Sep 17 00:00:00 2001
From: mahi-19 <upadhyayvivek.19@gmail.com>
Date: Tue, 27 Feb 2024 15:03:57 +0530
Subject: [PATCH 1/3] feat:Inline view of selected options of Multiselect

---
 src/Components/Form/MultiSelectMenuV2.tsx | 30 +++++++++++++++--------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/Components/Form/MultiSelectMenuV2.tsx b/src/Components/Form/MultiSelectMenuV2.tsx
index 25cd226e09e..b02d85d764c 100644
--- a/src/Components/Form/MultiSelectMenuV2.tsx
+++ b/src/Components/Form/MultiSelectMenuV2.tsx
@@ -61,9 +61,6 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
     if (selectedOptions.length === 0) return placeholder;
     if (props.renderSelectedOptions)
       return props.renderSelectedOptions(selectedOptions.map((o) => o.option));
-    return (
-      <span className="text-gray-800">{`${selectedOptions.length} item(s) selected`}</span>
-    );
   };
 
   return (
@@ -89,17 +86,30 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
                       <p className="ml-2.5 text-sm font-normal text-gray-600">
                         <Placeholder />
                       </p>
+
+                      {selectedOptions.length !== 0 && (
+                        <div className="flex flex-wrap gap-2 p-2">
+                          {selectedOptions.map((option) => (
+                            <MultiSelectOptionChip
+                              key={option.value}
+                              label={option.selectedLabel}
+                              onRemove={() => {
+                                const updatedOptions = selectedOptions.filter(
+                                  (selectedOption) =>
+                                    selectedOption.value !== option.value
+                                );
+                                props.onChange(
+                                  updatedOptions.map((o) => o.value) as any
+                                );
+                              }}
+                            />
+                          ))}
+                        </div>
+                      )}
                     </div>
                     <CareIcon className="care-l-angle-down -mb-0.5 text-lg text-gray-900" />
                   </div>
                 </Listbox.Button>
-                {selectedOptions.length !== 0 && (
-                  <div className="flex flex-wrap gap-2 p-2">
-                    {selectedOptions.map((option) => (
-                      <MultiSelectOptionChip label={option.selectedLabel} />
-                    ))}
-                  </div>
-                )}
               </div>
               <DropdownTransition show={open}>
                 <Listbox.Options className="cui-dropdown-base absolute top-12">

From b791b917867bbeaaa5c3c6b8c3e20d6f94ae7a23 Mon Sep 17 00:00:00 2001
From: mahi-19 <upadhyayvivek.19@gmail.com>
Date: Tue, 27 Feb 2024 16:40:46 +0530
Subject: [PATCH 2/3] fix: padding in input box

---
 src/Components/Form/MultiSelectMenuV2.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Components/Form/MultiSelectMenuV2.tsx b/src/Components/Form/MultiSelectMenuV2.tsx
index b02d85d764c..bc4c8751ea6 100644
--- a/src/Components/Form/MultiSelectMenuV2.tsx
+++ b/src/Components/Form/MultiSelectMenuV2.tsx
@@ -88,7 +88,7 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
                       </p>
 
                       {selectedOptions.length !== 0 && (
-                        <div className="flex flex-wrap gap-2 p-2">
+                        <div className="flex flex-wrap gap-2 ">
                           {selectedOptions.map((option) => (
                             <MultiSelectOptionChip
                               key={option.value}
@@ -164,7 +164,7 @@ interface MultiSelectOptionChipProps {
 export const MultiSelectOptionChip = (props: MultiSelectOptionChipProps) => {
   return (
     <span className="flex items-center gap-2 rounded-full border-gray-300 bg-gray-200 px-3 text-xs text-gray-700">
-      <p className="py-1.5">{props.label}</p>
+      <p className="py-1.8">{props.label}</p>
       {props.onRemove && (
         <p
           className="cursor-pointer rounded-full hover:bg-white"

From 42c95654dbce1fe3b4764ae16955afe4a3db7b51 Mon Sep 17 00:00:00 2001
From: mahi-19 <upadhyayvivek.19@gmail.com>
Date: Tue, 27 Feb 2024 17:01:28 +0530
Subject: [PATCH 3/3] fix: padding

---
 src/Components/Form/MultiSelectMenuV2.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Components/Form/MultiSelectMenuV2.tsx b/src/Components/Form/MultiSelectMenuV2.tsx
index bc4c8751ea6..ecb7416b5fe 100644
--- a/src/Components/Form/MultiSelectMenuV2.tsx
+++ b/src/Components/Form/MultiSelectMenuV2.tsx
@@ -88,7 +88,7 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
                       </p>
 
                       {selectedOptions.length !== 0 && (
-                        <div className="flex flex-wrap gap-2 ">
+                        <div className="flex flex-wrap gap-2">
                           {selectedOptions.map((option) => (
                             <MultiSelectOptionChip
                               key={option.value}
@@ -164,7 +164,7 @@ interface MultiSelectOptionChipProps {
 export const MultiSelectOptionChip = (props: MultiSelectOptionChipProps) => {
   return (
     <span className="flex items-center gap-2 rounded-full border-gray-300 bg-gray-200 px-3 text-xs text-gray-700">
-      <p className="py-1.8">{props.label}</p>
+      <p className="py-1">{props.label}</p>
       {props.onRemove && (
         <p
           className="cursor-pointer rounded-full hover:bg-white"