From d21327445d4b701295b0d23c4fb97060139261cc Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Tue, 3 Sep 2024 20:17:00 +0200
Subject: [PATCH] added 'x' to clear value and fix required * (#32572)

fixes: #32546

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
---
 .../src/components/dynamic/ClientSelectComponent.tsx      | 6 +++---
 .../src/controls/select-control/SingleSelectControl.tsx   | 4 +++-
 .../controls/select-control/TypeaheadSelectControl.tsx    | 8 +++++---
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/js/apps/admin-ui/src/components/dynamic/ClientSelectComponent.tsx b/js/apps/admin-ui/src/components/dynamic/ClientSelectComponent.tsx
index efaa64b341..742ce4bf76 100644
--- a/js/apps/admin-ui/src/components/dynamic/ClientSelectComponent.tsx
+++ b/js/apps/admin-ui/src/components/dynamic/ClientSelectComponent.tsx
@@ -2,6 +2,6 @@ import type { ComponentProps } from "./components";
 import { ClientSelect } from "../client/ClientSelect";
 import { convertToName } from "./DynamicComponents";
 
-export const ClientSelectComponent = (props: ComponentProps) => {
-  return <ClientSelect {...props} name={convertToName(props.name!)} />;
-};
+export const ClientSelectComponent = (props: ComponentProps) => (
+  <ClientSelect {...props} name={convertToName(props.name!)} />
+);
diff --git a/js/libs/ui-shared/src/controls/select-control/SingleSelectControl.tsx b/js/libs/ui-shared/src/controls/select-control/SingleSelectControl.tsx
index cafcea08f6..e239b2ee2a 100644
--- a/js/libs/ui-shared/src/controls/select-control/SingleSelectControl.tsx
+++ b/js/libs/ui-shared/src/controls/select-control/SingleSelectControl.tsx
@@ -13,6 +13,7 @@ import {
   FieldValues,
   useFormContext,
 } from "react-hook-form";
+import { getRuleValue } from "../../utils/getRuleValue";
 import { FormLabel } from "../FormLabel";
 import {
   SelectControlProps,
@@ -38,12 +39,13 @@ export const SingleSelectControl = <
     formState: { errors },
   } = useFormContext();
   const [open, setOpen] = useState(false);
+  const required = getRuleValue(controller.rules?.required) === true;
 
   return (
     <FormLabel
       name={name}
       label={label}
-      isRequired={!!controller.rules?.required}
+      isRequired={required}
       error={get(errors, name)}
       labelIcon={labelIcon}
     >
diff --git a/js/libs/ui-shared/src/controls/select-control/TypeaheadSelectControl.tsx b/js/libs/ui-shared/src/controls/select-control/TypeaheadSelectControl.tsx
index 4bc0017fda..12e84a54ae 100644
--- a/js/libs/ui-shared/src/controls/select-control/TypeaheadSelectControl.tsx
+++ b/js/libs/ui-shared/src/controls/select-control/TypeaheadSelectControl.tsx
@@ -21,6 +21,7 @@ import {
   FieldValues,
   useFormContext,
 } from "react-hook-form";
+import { getRuleValue } from "../../utils/getRuleValue";
 import { FormLabel } from "../FormLabel";
 import {
   SelectControlOption,
@@ -57,6 +58,7 @@ export const TypeaheadSelectControl = <
   const [filterValue, setFilterValue] = useState("");
   const [focusedItemIndex, setFocusedItemIndex] = useState<number>(0);
   const textInputRef = useRef<HTMLInputElement>();
+  const required = getRuleValue(controller.rules?.required) === true;
 
   const filteredOptions = options.filter((option) =>
     getValue(option).toLowerCase().startsWith(filterValue.toLowerCase()),
@@ -147,7 +149,7 @@ export const TypeaheadSelectControl = <
     <FormLabel
       name={name}
       label={label}
-      isRequired={!!controller.rules?.required}
+      isRequired={required}
       error={get(errors, name)}
       labelIcon={labelIcon}
     >
@@ -236,12 +238,12 @@ export const TypeaheadSelectControl = <
                       )}
                   </TextInputGroupMain>
                   <TextInputGroupUtilities>
-                    {!!filterValue && (
+                    {(!!filterValue || field.value) && (
                       <Button
                         variant="plain"
                         onClick={() => {
-                          field.onChange(undefined);
                           setFilterValue("");
+                          field.onChange("");
                           textInputRef?.current?.focus();
                         }}
                         aria-label="Clear input value"