feat:Inline view of selected options of Multiselect (#7287)

* feat:Inline view of selected options of Multiselect * fix: padding in input box * fix: padding
ohcnetwork · Mar 5, 2024 · 990dca9 · 990dca9
1 parent ae58e87
commit 990dca9
Showing 1 changed file with 21 additions and 11 deletions.
diff --git 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">
+                          {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">
@@ -154,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">{props.label}</p>
       {props.onRemove && (
         <p
           className="cursor-pointer rounded-full hover:bg-white"