From 28fc9e67c4014a3f144426dc3b6e080448f285e2 Mon Sep 17 00:00:00 2001
From: Pablo Allendes <allendes91@gmail.com>
Date: Mon, 30 Sep 2024 14:13:57 +0200
Subject: [PATCH] fix(MultiComboboxInput): add disabled styles

---
 .../form-field/multi-combobox/multi-combobox-input.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/form-field/multi-combobox/multi-combobox-input.tsx b/src/components/form-field/multi-combobox/multi-combobox-input.tsx
index 2301987f..d4ead056 100644
--- a/src/components/form-field/multi-combobox/multi-combobox-input.tsx
+++ b/src/components/form-field/multi-combobox/multi-combobox-input.tsx
@@ -5,6 +5,7 @@ import {
 } from "@headlessui/react";
 import React from "react";
 import { CaretDownIcon } from "../../../icons";
+import { classNames } from "../../../util/class-names";
 
 export interface MultiComboboxInputProps extends Omit<ComboboxInputProps, "displayValue"> {
     id: string;
@@ -20,6 +21,7 @@ export const MultiComboboxInput = ({
     placeholder,
     onChange,
     showButton = true,
+    disabled = false,
     ...props
 }: MultiComboboxInputProps) => {
     return (
@@ -30,10 +32,14 @@ export const MultiComboboxInput = ({
                 placeholder={placeholder}
                 displayValue={() => displayValue}
                 onChange={onChange}
-                className="paragraph-100 flex h-8 w-full items-center rounded border border-neutral-400 py-2 pl-3 pr-8 focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-200"
+                className={classNames(
+                    "paragraph-100 flex h-8 w-full items-center rounded border border-neutral-400 py-2 pl-3 pr-8 focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-200",
+                    disabled &&
+                        "cursor-not-allowed border-neutral-300 bg-neutral-100 text-neutral-600 hover:border-neutral-300"
+                )}
                 {...props}
             />
-            {showButton ? (
+            {showButton && !disabled ? (
                 <HeadlessUiComboboxButton className="absolute inset-y-0 right-0 flex items-center px-1.5">
                     <div className="flex h-5 w-5 items-center justify-center rounded rounded-r-md bg-neutral-100">
                         <CaretDownIcon