diff --git a/src/VehicleSelector/VehicleSelector.test.tsx b/src/VehicleSelector/VehicleSelector.test.tsx
index b830fd7b..3490d398 100644
--- a/src/VehicleSelector/VehicleSelector.test.tsx
+++ b/src/VehicleSelector/VehicleSelector.test.tsx
@@ -1,6 +1,6 @@
import React, { useState } from "react";
import { Vehicle, VehicleSelectorProps } from "./VehicleSelector.types";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import VehicleSelector from "./VehicleSelector";
@@ -235,4 +235,64 @@ describe("VehicleSelector", () => {
expect(screen.getByRole("combobox", { name: /variant/i })).toBeDisabled();
expect(screen.getByRole("combobox", { name: /gate/i })).toBeDisabled();
});
+
+ it("removes clear button when variant is deselected in single selection mode", async () => {
+ const value = [
+ {
+ _id: "64c8c4cccc8d6f00130b366b",
+ gate: "Gate 1",
+ modelYear: "2015",
+ projectCode: "911",
+ variant: "NN"
+ }
+ ];
+
+ render(
+
+ );
+
+ expect(screen.getByRole("combobox", { name: /variant/i })).toHaveValue(
+ "NN"
+ );
+
+ const variantField = screen.getByRole("combobox", { name: /variant/i });
+ const clearButton = variantField.parentElement?.querySelector(
+ '[aria-label="Clear"]'
+ );
+
+ expect(clearButton).toBeInTheDocument();
+ (clearButton as HTMLElement)?.click();
+
+ await waitFor(() =>
+ expect(
+ variantField.parentElement?.querySelector('[aria-label="Clear"]')
+ ).not.toBeInTheDocument()
+ );
+
+ expect(variantField).toHaveValue("");
+ });
+
+ it("filters model years based on selected project", async () => {
+ render();
+
+ const projectInput = screen.getByRole("combobox", {
+ name: /project code/i
+ });
+ fireEvent.mouseDown(projectInput);
+ fireEvent.click(screen.getByText("911"));
+
+ const modelYearInput = screen.getByRole("combobox", {
+ name: /model year/i
+ });
+ fireEvent.mouseDown(modelYearInput);
+
+ await waitFor(() => {
+ expect(screen.getByText("2015")).toBeInTheDocument();
+ expect(screen.getByText("2016")).toBeInTheDocument();
+ });
+ });
});
diff --git a/src/VehicleSelector/VehicleSelector.tsx b/src/VehicleSelector/VehicleSelector.tsx
index 1a2dde61..9421c7fe 100644
--- a/src/VehicleSelector/VehicleSelector.tsx
+++ b/src/VehicleSelector/VehicleSelector.tsx
@@ -223,7 +223,10 @@ function VehicleSelector({
}
}}
size={size}
- value={selectedVariants}
+ // if array is empty, set value to null to avoid rendering the clear button
+ value={
+ multipleSelection ? selectedVariants : selectedVariants[0] || null
+ }
/>