Fix disabled classname

Author: luciodale

packages/library/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@luciodale/react-searchable-dropdown",
-	"version": "1.0.41",
+	"version": "1.1.0",
 	"author": "Lucio D'Alessandro",
 	"repository": {
 		"type": "git",

packages/library/src/SearchableDropdown.test.tsx

@@ -104,6 +104,15 @@ describe("SearchableDropdown", () => {
 		renderDropdown({ disabled: true });
 		const input = screen.getByPlaceholderText("Pick a fruit");
 		expect(input).toHaveProperty("disabled", true);
+		expect(input.closest(".lda-dropdown-container")?.classList.contains("disabled")).toBe(true);
+	});
+
+	it("applies classNameDisabled to the container when disabled", () => {
+		renderDropdown({ disabled: true, classNameDisabled: "custom-disabled" });
+		const input = screen.getByPlaceholderText("Pick a fruit");
+		const container = input.closest(".lda-dropdown-container");
+		expect(container?.classList.contains("custom-disabled")).toBe(true);
+		expect(container?.classList.contains("disabled")).toBe(false);
 	});
 
 	describe("a11y", () => {

packages/library/src/SearchableDropdown.tsx

@@ -213,7 +213,7 @@ export function SearchableDropdown<T extends TDropdownOption, G>({
 	return (
 		<div
 			ref={core.refs.setReference}
-			className={`${BASE_CLASS} ${classNameSearchableDropdownContainer} ${disabled ? "disabled" : ""}`}
+			className={`${BASE_CLASS} ${classNameSearchableDropdownContainer} ${disabled ? classNameDisabled || "disabled" : ""}`}
 			onKeyDown={handleKeyDown}
 		>
 			<input
@@ -228,7 +228,7 @@ export function SearchableDropdown<T extends TDropdownOption, G>({
 				readOnly={disabled}
 				disabled={disabled}
 				placeholder={getSearchQueryLabelFromOption(value || "") || placeholder}
-				className={`${classNameSearchQueryInput} ${disabled ? (classNameDisabled ?? "") : ""}`}
+				className={classNameSearchQueryInput}
 				value={core.searchQuery}
 				onChange={core.handleOnChangeSearchQuery}
 				data-testid={inputId ?? classNameSearchQueryInput}

packages/library/src/SearchableDropdownMulti.test.tsx

@@ -19,6 +19,7 @@ type TestOverrides = {
 	values?: string[];
 	setValues?: (options: string[]) => void;
 	disabled?: boolean;
+	classNameDisabled?: string;
 	onClearAll?: () => void;
 	onClearOption?: (option: string) => void;
 };
@@ -43,6 +44,23 @@ describe("SearchableDropdownMulti", () => {
 		expect(screen.getByPlaceholderText("Pick fruits")).toBeDefined();
 	});
 
+	it("renders disabled state", () => {
+		renderMultiDropdown({ disabled: true });
+		const input = screen.getByPlaceholderText("Pick fruits");
+		expect(input).toHaveProperty("disabled", true);
+		expect(input.closest(".lda-multi-dropdown-container")?.classList.contains("disabled")).toBe(
+			true,
+		);
+	});
+
+	it("applies classNameDisabled to the container when disabled", () => {
+		renderMultiDropdown({ disabled: true, classNameDisabled: "custom-disabled" });
+		const input = screen.getByPlaceholderText("Pick fruits");
+		const container = input.closest(".lda-multi-dropdown-container");
+		expect(container?.classList.contains("custom-disabled")).toBe(true);
+		expect(container?.classList.contains("disabled")).toBe(false);
+	});
+
 	it("opens dropdown on focus", async () => {
 		renderMultiDropdown();
 		await userEvent.click(screen.getByPlaceholderText("Pick fruits"));