From 880595be150d318bb68fa7ba374fed7c84a0d03a Mon Sep 17 00:00:00 2001
From: nicholas <nicholas.spong@adyen.com>
Date: Mon, 15 Jul 2024 15:37:54 +0200
Subject: [PATCH] Solving issue with having an id on the SelectButtonElement
 that was breaking Riverty & CtP unit tests

---
 .../components/Installments/Installments.tsx          |  1 +
 .../components/internal/FormFields/Select/Select.tsx  |  4 +++-
 .../FormFields/Select/components/SelectButton.tsx     | 11 +++++++++--
 .../components/internal/FormFields/Select/types.ts    |  2 ++
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx b/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
index 656c004250..ccca313b67 100644
--- a/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
+++ b/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
@@ -133,6 +133,7 @@ function Installments(props: InstallmentsProps) {
                     onChange={onSelectInstallment}
                     name={'installments'}
                     readonly={installmentOptions?.values?.length === 1}
+                    allowIdOnButton={true}
                 />
             </Field>
         </div>
diff --git a/packages/lib/src/components/internal/FormFields/Select/Select.tsx b/packages/lib/src/components/internal/FormFields/Select/Select.tsx
index b59b043c85..1372ef7a74 100644
--- a/packages/lib/src/components/internal/FormFields/Select/Select.tsx
+++ b/packages/lib/src/components/internal/FormFields/Select/Select.tsx
@@ -29,7 +29,8 @@ function Select({
     disableTextFilter,
     clearOnSelect,
     blurOnClose,
-    onListToggle
+    onListToggle,
+    allowIdOnButton = false
 }: SelectProps) {
     const filterInputRef = useRef(null);
     const selectContainerRef = useRef(null);
@@ -289,6 +290,7 @@ function Select({
                 toggleList={toggleList}
                 disabled={disabled}
                 ariaDescribedBy={uniqueId ? `${uniqueId}${ARIA_ERROR_SUFFIX}` : null}
+                allowIdOnButton={allowIdOnButton}
             />
             <SelectList
                 active={activeOption}
diff --git a/packages/lib/src/components/internal/FormFields/Select/components/SelectButton.tsx b/packages/lib/src/components/internal/FormFields/Select/components/SelectButton.tsx
index f9012bbf6d..8557d305d2 100644
--- a/packages/lib/src/components/internal/FormFields/Select/components/SelectButton.tsx
+++ b/packages/lib/src/components/internal/FormFields/Select/components/SelectButton.tsx
@@ -6,7 +6,11 @@ import styles from '../Select.module.scss';
 import Img from '../../../Img';
 
 function SelectButtonElement({ filterable, toggleButtonRef, ...props }) {
-    if (filterable) return <div {...props} ref={toggleButtonRef} />;
+    if (filterable) {
+        // Even if passed, we can't add an id to this div since it is not allowed to associate a div with a label element
+        const { id, ...strippedProps } = props;
+        return <div {...strippedProps} ref={toggleButtonRef} />;
+    }
 
     return <button id={props.id} aria-describedby={props.ariaDescribedBy} type={'button'} {...props} ref={toggleButtonRef} />;
 }
@@ -58,7 +62,10 @@ function SelectButton(props: Readonly<SelectButtonProps>) {
             onClick={onClickHandler}
             onKeyDown={!readonly ? props.onButtonKeyDown : null}
             toggleButtonRef={props.toggleButtonRef}
-            {...(props.id && { id: props.id })}
+            // Only for some dropdowns e.g. the one found in installments when it is just in the form of a single dropdown, do we want to add an id that links to a label's for attr
+            // If we allow an id to be added to the buttons in CtPCardsList, for example, unit tests start failing because it seems a button with an id no longer has a name property that can be used
+            // as a qualifier in findByRole
+            {...(props.allowIdOnButton && props.id && { id: props.id })}
         >
             {!props.filterable ? (
                 <Fragment>
diff --git a/packages/lib/src/components/internal/FormFields/Select/types.ts b/packages/lib/src/components/internal/FormFields/Select/types.ts
index a4b4d645d0..43aca5fcf1 100644
--- a/packages/lib/src/components/internal/FormFields/Select/types.ts
+++ b/packages/lib/src/components/internal/FormFields/Select/types.ts
@@ -39,6 +39,7 @@ export interface SelectProps {
     clearOnSelect?: boolean;
     blurOnClose?: boolean;
     onListToggle?: (isOpen: boolean) => void;
+    allowIdOnButton?: boolean;
 }
 
 export interface SelectButtonProps {
@@ -61,6 +62,7 @@ export interface SelectButtonProps {
     id?: string;
     ariaDescribedBy: string;
     disabled: boolean;
+    allowIdOnButton?: boolean;
 }
 
 export interface SelectListProps {