From 5e1d7d6f6482b533c6fa9afe88f927293e3576c0 Mon Sep 17 00:00:00 2001
From: Mihai Albu <mihai.albu@sage.com>
Date: Mon, 30 Sep 2024 09:16:29 +0000
Subject: [PATCH 1/4] fix(badge): investigate failing RTL test

removed pseudo clsses and added react synthetic events
---
 src/components/badge/badge.component.tsx | 18 +++++++++-
 src/components/badge/badge.style.ts      | 43 ++++++++++++++----------
 src/components/badge/badge.test.tsx      | 36 ++++++++++++++++++--
 3 files changed, 76 insertions(+), 21 deletions(-)

diff --git a/src/components/badge/badge.component.tsx b/src/components/badge/badge.component.tsx
index 2ed3c6b8d6..f05acc7221 100644
--- a/src/components/badge/badge.component.tsx
+++ b/src/components/badge/badge.component.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   StyledBadgeWrapper,
   StyledCrossIcon,
@@ -28,6 +28,8 @@ export const Badge = ({
 }: BadgeProps) => {
   const shouldDisplayCounter = +counter > 0;
   const counterToDisplay = +counter > 99 ? 99 : counter;
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
 
   const renderCorrectBadge = () => {
     const props = onClick
@@ -46,6 +48,20 @@ export const Badge = ({
           data-component="badge"
           color={color}
           {...props}
+          onFocus={() => {
+            setIsFocused(true);
+          }}
+          onBlur={() => {
+            setIsFocused(false);
+          }}
+          onMouseEnter={() => {
+            setIsHovered(true);
+          }}
+          onMouseLeave={() => {
+            setIsHovered(false);
+          }}
+          isFocused={isFocused}
+          isHovered={isHovered}
         >
           {onClick && (
             <StyledCrossIcon data-element="badge-cross-icon" type="cross" />
diff --git a/src/components/badge/badge.style.ts b/src/components/badge/badge.style.ts
index 355929793c..e5581ef998 100644
--- a/src/components/badge/badge.style.ts
+++ b/src/components/badge/badge.style.ts
@@ -29,6 +29,8 @@ const StyledCounter = styled.div`
 
 interface StyledBadgeProps {
   color: string;
+  isFocused?: boolean;
+  isHovered?: boolean;
 }
 
 const StyledBadge = styled.span.attrs(({ onClick }) => ({
@@ -52,7 +54,7 @@ const StyledBadge = styled.span.attrs(({ onClick }) => ({
     border: none;
   }
 
-  ${({ onClick, color, theme }) => css`
+  ${({ onClick, color, theme, isFocused, isHovered }) => css`
     ${onClick &&
     `
       ${commonStyles}
@@ -65,27 +67,32 @@ const StyledBadge = styled.span.attrs(({ onClick }) => ({
       }
 
       border-color: ${toColor(theme, color)};
-      color: ${toColor(theme, color)};      
-
-      &:hover,
-      &:focus {
-        background: ${toColor(theme, color)};
-        border: none;
-        ${StyledCounter} {
-          display: none;
-        }
+      color: ${toColor(theme, color)};
+
+      ${
+        (isFocused || isHovered) &&
+        `
+        && {
+          background: ${toColor(theme, color)};
+          border: none;
+          ${StyledCounter} {
+            display: none;
+          }
 
-        ${StyledIcon} {
-          display: block;
-          width: auto;
-          height: auto;
-          margin-right: 0;
+          ${StyledIcon} {
+            display: block;
+            width: auto;
+            height: auto;
+            margin-right: 0;
 
-          :before {
-            font-size: 20px;
-            color: var(--colorsActionMajorYang100);
+            :before {
+              font-size: 20px;
+              color: var(--colorsActionMajorYang100);
+            }
           }
         }
+      `
+      }
       }
     `}
   `}
diff --git a/src/components/badge/badge.test.tsx b/src/components/badge/badge.test.tsx
index d0c3a4ed5f..c0d4f0da44 100644
--- a/src/components/badge/badge.test.tsx
+++ b/src/components/badge/badge.test.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import Badge from "./badge.component";
 
 const renderComponent = (props = {}) => render(<Badge {...props}>Foo</Badge>);
@@ -32,11 +33,42 @@ describe("Badge", () => {
   it("should render as a button element when onClick is set", () => {
     renderComponent({ counter: 9, onClick: () => {} });
 
-    // FIXME: FE-6575 investigate why toBeVisible() fails to find "9"
-    expect(screen.getByText("9")).toBeInTheDocument();
+    expect(screen.getByText("9")).toBeVisible();
     expect(screen.getByRole("button")).toBeVisible();
   });
 
+  it("should hide the counter text when the badge is focused and it shows it when it is not focused", () => {
+    renderComponent({ counter: 9, onClick: () => {} });
+
+    const badgeButton = screen.getByRole("button");
+    const badgeText = screen.getByText("9");
+
+    badgeButton.focus();
+
+    expect(badgeText).not.toBeVisible();
+
+    badgeButton.blur();
+
+    expect(badgeText).toBeVisible();
+  });
+
+  it("should hide the counter text when the badge is hovered and it shows it when it is unhovered", async () => {
+    const user = userEvent.setup();
+
+    renderComponent({ counter: 9, onClick: () => {} });
+
+    const badgeButton = screen.getByRole("button");
+    const badgeText = screen.getByText("9");
+
+    await user.hover(badgeButton);
+
+    expect(badgeText).not.toBeVisible();
+
+    await user.unhover(badgeButton);
+
+    expect(badgeText).toBeVisible();
+  });
+
   it("should not render as a button if onClick is not set", () => {
     renderComponent({ counter: 9 });
 

From 6de179cbae24f36ef8d7a7b122b7ccb8d13ec634 Mon Sep 17 00:00:00 2001
From: edleeks87 <edward.leeks@sage.com>
Date: Thu, 3 Oct 2024 09:59:58 +0100
Subject: [PATCH 2/4] fix(select): prevent deprecation warning about
 uncontrolled textbox from being fired

Ensures that Textbox used in Select components is used in a controlled manner to prevent the
deprecation warnings from being fired

fix #6883
---
 .../select-textbox.component.tsx              |  9 +-
 .../select-textbox/select-textbox.test.tsx    | 97 ++++---------------
 .../filterable-select.component.tsx           |  4 +
 .../filterable-select.test.tsx                | 32 ++++++
 .../multi-select/multi-select.component.tsx   |  4 +
 .../select/multi-select/multi-select.test.tsx | 32 ++++++
 .../simple-select/simple-select.component.tsx |  4 +
 .../simple-select/simple-select.spec.tsx      |  2 +-
 .../simple-select/simple-select.test.tsx      | 32 ++++++
 9 files changed, 132 insertions(+), 84 deletions(-)

diff --git a/src/components/select/__internal__/select-textbox/select-textbox.component.tsx b/src/components/select/__internal__/select-textbox/select-textbox.component.tsx
index 07596ed65b..766d5ca4a7 100644
--- a/src/components/select/__internal__/select-textbox/select-textbox.component.tsx
+++ b/src/components/select/__internal__/select-textbox/select-textbox.component.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 
-import { CustomSelectChangeEvent } from "../../simple-select/simple-select.component";
 import { SelectTextboxContext } from "./select-textbox.context";
 import {
   StyledSelectText,
@@ -40,10 +39,6 @@ export interface FormInputPropTypes
   name?: string;
   /** Specify a callback triggered on blur */
   onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Specify a callback triggered on change */
-  onChange?: (
-    ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>
-  ) => void;
   /** Specify a callback triggered on click */
   onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
   /** Specify a callback triggered on focus */
@@ -114,7 +109,6 @@ const SelectTextbox = React.forwardRef(
       onClick,
       onFocus,
       onBlur,
-      onChange,
       formattedValue = "",
       selectedValue,
       required,
@@ -182,7 +176,8 @@ const SelectTextbox = React.forwardRef(
           inputIcon="dropdown"
           autoComplete="off"
           size={size}
-          onChange={onChange}
+          // prevent uncontrolled warning being fired
+          onChange={() => {}}
           formattedValue={formattedValue}
           value={
             hasStringValue ? (selectedValue as string | string[]) : undefined
diff --git a/src/components/select/__internal__/select-textbox/select-textbox.test.tsx b/src/components/select/__internal__/select-textbox/select-textbox.test.tsx
index a63c874741..e9203b3a22 100644
--- a/src/components/select/__internal__/select-textbox/select-textbox.test.tsx
+++ b/src/components/select/__internal__/select-textbox/select-textbox.test.tsx
@@ -5,7 +5,7 @@ import userEvent from "@testing-library/user-event";
 import SelectTextbox from ".";
 
 test("renders as a combobox", () => {
-  render(<SelectTextbox label="Select Colour" onChange={() => {}} />);
+  render(<SelectTextbox label="Select Colour" />);
 
   expect(
     screen.getByRole("combobox", { name: /Select Colour/i })
@@ -13,7 +13,7 @@ test("renders as a combobox", () => {
 });
 
 test("renders as a readonly textbox if readOnly prop is true", () => {
-  render(<SelectTextbox label="Select Colour" onChange={() => {}} readOnly />);
+  render(<SelectTextbox label="Select Colour" readOnly />);
 
   const input = screen.getByRole("textbox", { name: /Select Colour/i });
   expect(input).toBeVisible();
@@ -21,7 +21,7 @@ test("renders as a readonly textbox if readOnly prop is true", () => {
 });
 
 test("renders as a disabled combobox if disabled prop is true", () => {
-  render(<SelectTextbox label="Select Colour" onChange={() => {}} disabled />);
+  render(<SelectTextbox label="Select Colour" disabled />);
 
   const input = screen.getByRole("combobox", { name: /Select Colour/i });
   expect(input).toBeVisible();
@@ -29,7 +29,7 @@ test("renders as a disabled combobox if disabled prop is true", () => {
 });
 
 test("combobox has correct accessible name when ariaLabel prop is provided", () => {
-  render(<SelectTextbox onChange={() => {}} ariaLabel="Label" />);
+  render(<SelectTextbox ariaLabel="Label" />);
 
   expect(screen.getByRole("combobox")).toHaveAccessibleName("Label");
 });
@@ -38,7 +38,7 @@ test("combobox has correct accessible name when ariaLabelledBy prop is provided"
   render(
     <>
       <h3 id="label">Label</h3>
-      <SelectTextbox onChange={() => {}} ariaLabelledby="label" />
+      <SelectTextbox ariaLabelledby="label" />
     </>
   );
 
@@ -49,7 +49,7 @@ test("combobox has correct accessible name when accessibilityLabelId prop is pro
   render(
     <>
       <h3 id="label">Label</h3>
-      <SelectTextbox onChange={() => {}} accessibilityLabelId="label" />
+      <SelectTextbox accessibilityLabelId="label" />
     </>
   );
 
@@ -57,16 +57,14 @@ test("combobox has correct accessible name when accessibilityLabelId prop is pro
 });
 
 test("renders dropdown icon", () => {
-  render(<SelectTextbox onChange={() => {}} />);
+  render(<SelectTextbox />);
 
   expect(screen.getByTestId("icon")).toHaveAttribute("type", "dropdown");
 });
 
 test("calls onFocus callback when combobox is focused", () => {
   const onFocus = jest.fn();
-  render(
-    <SelectTextbox label="Textbox" onChange={() => {}} onFocus={onFocus} />
-  );
+  render(<SelectTextbox label="Textbox" onFocus={onFocus} />);
 
   screen.getByRole("combobox", { name: "Textbox" }).focus();
 
@@ -75,14 +73,7 @@ test("calls onFocus callback when combobox is focused", () => {
 
 test("does not call onFocus callback when combobox is disabled", () => {
   const onFocus = jest.fn();
-  render(
-    <SelectTextbox
-      label="Textbox"
-      onChange={() => {}}
-      onFocus={onFocus}
-      disabled
-    />
-  );
+  render(<SelectTextbox label="Textbox" onFocus={onFocus} disabled />);
 
   screen.getByRole("combobox", { name: "Textbox" }).focus();
 
@@ -91,7 +82,7 @@ test("does not call onFocus callback when combobox is disabled", () => {
 
 test("calls onBlur callback when combobox is blurred", () => {
   const onBlur = jest.fn();
-  render(<SelectTextbox label="Textbox" onChange={() => {}} onBlur={onBlur} />);
+  render(<SelectTextbox label="Textbox" onBlur={onBlur} />);
 
   const combobox = screen.getByRole("combobox", { name: "Textbox" });
   combobox.focus();
@@ -101,7 +92,7 @@ test("calls onBlur callback when combobox is blurred", () => {
 });
 
 test("combobox has placeholder text when it has no value and hasTextCursor prop is true", () => {
-  render(<SelectTextbox onChange={() => {}} hasTextCursor />);
+  render(<SelectTextbox hasTextCursor />);
 
   expect(screen.getByRole("combobox")).toHaveAttribute(
     "placeholder",
@@ -110,23 +101,14 @@ test("combobox has placeholder text when it has no value and hasTextCursor prop
 });
 
 test("combobox has custom placeholder text when it has no value, hasTextCursor prop is true and a custom placeholder is provided", () => {
-  render(
-    <SelectTextbox onChange={() => {}} hasTextCursor placeholder="foobar" />
-  );
+  render(<SelectTextbox hasTextCursor placeholder="foobar" />);
 
   expect(screen.getByRole("combobox")).toHaveAttribute("placeholder", "foobar");
 });
 
 test("does not call onFocus callback when textbox is read only", () => {
   const onFocus = jest.fn();
-  render(
-    <SelectTextbox
-      label="Textbox"
-      onChange={() => {}}
-      onFocus={onFocus}
-      readOnly
-    />
-  );
+  render(<SelectTextbox label="Textbox" onFocus={onFocus} readOnly />);
 
   screen.getByRole("textbox", { name: "Textbox" }).focus();
 
@@ -140,7 +122,6 @@ describe("when hasTextCursor prop is false", () => {
         label="Textbox"
         formattedValue="foo"
         hasTextCursor={false}
-        onChange={() => {}}
       />
     );
 
@@ -151,20 +132,14 @@ describe("when hasTextCursor prop is false", () => {
   });
 
   it("displays the placeholder text in an overlay when the combobox has no value", () => {
-    render(
-      <SelectTextbox
-        placeholder="foobaz"
-        hasTextCursor={false}
-        onChange={() => {}}
-      />
-    );
+    render(<SelectTextbox placeholder="foobaz" hasTextCursor={false} />);
 
     expect(screen.getByRole("combobox")).not.toHaveTextContent("foobaz");
     expect(screen.getByText("foobaz")).toBeVisible();
   });
 
   it("renders combobox without autocomplete", () => {
-    render(<SelectTextbox label="Textbox" onChange={() => {}} />);
+    render(<SelectTextbox label="Textbox" />);
 
     const combobox = screen.getByRole("combobox", { name: "Textbox" });
     expect(combobox).toHaveAttribute("autocomplete", "off");
@@ -172,11 +147,7 @@ describe("when hasTextCursor prop is false", () => {
 
   it("hides the combobox overlay from assistive technologies", () => {
     render(
-      <SelectTextbox
-        formattedValue="You can't see me"
-        hasTextCursor={false}
-        onChange={() => {}}
-      />
+      <SelectTextbox formattedValue="You can't see me" hasTextCursor={false} />
     );
 
     expect(screen.getByTestId("select-text")).toHaveAttribute(
@@ -189,12 +160,7 @@ describe("when hasTextCursor prop is false", () => {
     const onClick = jest.fn();
     const user = userEvent.setup();
     render(
-      <SelectTextbox
-        label="Textbox"
-        onChange={() => {}}
-        onClick={onClick}
-        hasTextCursor={false}
-      />
+      <SelectTextbox label="Textbox" onClick={onClick} hasTextCursor={false} />
     );
 
     await user.click(screen.getByText("Please Select..."));
@@ -203,13 +169,7 @@ describe("when hasTextCursor prop is false", () => {
   });
 
   it("truncates the displayed text of the selected option with ellipsis", () => {
-    render(
-      <SelectTextbox
-        formattedValue="foo"
-        hasTextCursor={false}
-        onChange={() => {}}
-      />
-    );
+    render(<SelectTextbox formattedValue="foo" hasTextCursor={false} />);
 
     expect(screen.getByText("foo")).toHaveStyle({
       whiteSpace: "nowrap",
@@ -220,12 +180,7 @@ describe("when hasTextCursor prop is false", () => {
 
   it("applies correct styles when disabled", () => {
     render(
-      <SelectTextbox
-        disabled
-        formattedValue="foo"
-        hasTextCursor={false}
-        onChange={() => {}}
-      />
+      <SelectTextbox disabled formattedValue="foo" hasTextCursor={false} />
     );
 
     expect(screen.getByTestId("select-text")).toHaveStyle({
@@ -237,12 +192,7 @@ describe("when hasTextCursor prop is false", () => {
 
   it("applies correct styles when read-only", () => {
     render(
-      <SelectTextbox
-        readOnly
-        formattedValue="foo"
-        hasTextCursor={false}
-        onChange={() => {}}
-      />
+      <SelectTextbox readOnly formattedValue="foo" hasTextCursor={false} />
     );
 
     expect(screen.getByTestId("select-text")).toHaveStyle({
@@ -254,12 +204,7 @@ describe("when hasTextCursor prop is false", () => {
 
   it("applies correct styles when transparent", () => {
     render(
-      <SelectTextbox
-        transparent
-        formattedValue="foo"
-        hasTextCursor={false}
-        onChange={() => {}}
-      />
+      <SelectTextbox transparent formattedValue="foo" hasTextCursor={false} />
     );
 
     expect(screen.getByTestId("select-text")).toHaveStyle({
diff --git a/src/components/select/filterable-select/filterable-select.component.tsx b/src/components/select/filterable-select/filterable-select.component.tsx
index 1bff2994ba..948ce3c528 100644
--- a/src/components/select/filterable-select/filterable-select.component.tsx
+++ b/src/components/select/filterable-select/filterable-select.component.tsx
@@ -90,6 +90,10 @@ export interface FilterableSelectProps
   isOptional?: boolean;
   /** Flag to configure component as mandatory */
   required?: boolean;
+  /** Specify a callback triggered on change */
+  onChange?: (
+    ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>
+  ) => void;
 }
 
 export const FilterableSelect = React.forwardRef<
diff --git a/src/components/select/filterable-select/filterable-select.test.tsx b/src/components/select/filterable-select/filterable-select.test.tsx
index c1124ba794..a4a6e0ce4a 100644
--- a/src/components/select/filterable-select/filterable-select.test.tsx
+++ b/src/components/select/filterable-select/filterable-select.test.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import FilterableSelect from ".";
 import Option from "../option";
+import Logger from "../../../__internal__/utils/logger";
 
 test("renders combobox without text overlay", () => {
   render(
@@ -81,3 +82,34 @@ test("combobox has correct accessible name when aria-labelledby prop is provided
 
   expect(screen.getByRole("combobox")).toHaveAccessibleName("My Select");
 });
+
+test("should not display deprecation about uncontrolled Textbox when parent component is controlled", () => {
+  const loggerSpy = jest.spyOn(Logger, "deprecate");
+  render(
+    <FilterableSelect
+      label="Colour"
+      onChange={() => {}}
+      value="1"
+      placeholder="Select a colour"
+    >
+      <Option text="Amber" value="1" />
+    </FilterableSelect>
+  );
+
+  expect(loggerSpy).not.toHaveBeenCalled();
+  loggerSpy.mockClear();
+});
+
+test("should not display deprecation about uncontrolled Textbox when parent component is not controlled", () => {
+  const loggerSpy = jest.spyOn(Logger, "deprecate");
+  render(
+    <FilterableSelect label="Colour" placeholder="Select a colour">
+      <Option text="Amber" value="1" />
+    </FilterableSelect>
+  );
+
+  expect(loggerSpy).not.toHaveBeenCalledWith(
+    "Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+  );
+  loggerSpy.mockClear();
+});
diff --git a/src/components/select/multi-select/multi-select.component.tsx b/src/components/select/multi-select/multi-select.component.tsx
index 335c32ec0f..a206200a44 100644
--- a/src/components/select/multi-select/multi-select.component.tsx
+++ b/src/components/select/multi-select/multi-select.component.tsx
@@ -91,6 +91,10 @@ export interface MultiSelectProps
   virtualScrollOverscan?: number;
   /** Flag to configure component as optional. */
   isOptional?: boolean;
+  /** Specify a callback triggered on change */
+  onChange?: (
+    ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>
+  ) => void;
 }
 
 export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
diff --git a/src/components/select/multi-select/multi-select.test.tsx b/src/components/select/multi-select/multi-select.test.tsx
index d15f7d8699..6fc95df78d 100644
--- a/src/components/select/multi-select/multi-select.test.tsx
+++ b/src/components/select/multi-select/multi-select.test.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import MultiSelect from ".";
 import Option from "../option";
+import Logger from "../../../__internal__/utils/logger";
 
 test("renders combobox without text overlay", () => {
   render(
@@ -71,3 +72,34 @@ test("combobox has correct accessible name when aria-labelledby prop is provided
 
   expect(screen.getByRole("combobox")).toHaveAccessibleName("My Select");
 });
+
+test("should not display deprecation about uncontrolled Textbox when parent component is controlled", () => {
+  const loggerSpy = jest.spyOn(Logger, "deprecate");
+  render(
+    <MultiSelect
+      label="Colour"
+      onChange={() => {}}
+      value={["1"]}
+      placeholder="Select a colour"
+    >
+      <Option text="Amber" value="1" />
+    </MultiSelect>
+  );
+
+  expect(loggerSpy).not.toHaveBeenCalled();
+  loggerSpy.mockClear();
+});
+
+test("should not display deprecation about uncontrolled Textbox when parent component is not controlled", () => {
+  const loggerSpy = jest.spyOn(Logger, "deprecate");
+  render(
+    <MultiSelect label="Colour" placeholder="Select a colour">
+      <Option text="Amber" value="1" />
+    </MultiSelect>
+  );
+
+  expect(loggerSpy).not.toHaveBeenCalledWith(
+    "Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+  );
+  loggerSpy.mockClear();
+});
diff --git a/src/components/select/simple-select/simple-select.component.tsx b/src/components/select/simple-select/simple-select.component.tsx
index 63e839bb8c..90bf3b2da5 100644
--- a/src/components/select/simple-select/simple-select.component.tsx
+++ b/src/components/select/simple-select/simple-select.component.tsx
@@ -94,6 +94,10 @@ export interface SimpleSelectProps
   isOptional?: boolean;
   /** Flag to configure component as mandatory */
   isRequired?: boolean;
+  /** Specify a callback triggered on change */
+  onChange?: (
+    ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>
+  ) => void;
 }
 
 export const SimpleSelect = React.forwardRef<
diff --git a/src/components/select/simple-select/simple-select.spec.tsx b/src/components/select/simple-select/simple-select.spec.tsx
index e17f058aa2..a819ea688a 100644
--- a/src/components/select/simple-select/simple-select.spec.tsx
+++ b/src/components/select/simple-select/simple-select.spec.tsx
@@ -112,7 +112,7 @@ describe("SimpleSelect", () => {
         "Uncontrolled behaviour in `Simple Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
       );
 
-      expect(loggerSpy).toHaveBeenCalledTimes(2);
+      expect(loggerSpy).toHaveBeenCalledTimes(1);
     });
   });
 
diff --git a/src/components/select/simple-select/simple-select.test.tsx b/src/components/select/simple-select/simple-select.test.tsx
index 441247c2d0..f5db342f53 100644
--- a/src/components/select/simple-select/simple-select.test.tsx
+++ b/src/components/select/simple-select/simple-select.test.tsx
@@ -3,6 +3,7 @@ import { render, screen } from "@testing-library/react";
 
 import SimpleSelect from ".";
 import Option from "../option";
+import Logger from "../../../__internal__/utils/logger";
 
 test("renders combobox and text overlay that is hidden from assistive technologies", () => {
   render(
@@ -83,3 +84,34 @@ test("combobox has correct accessible name when aria-labelledby prop is provided
 
   expect(screen.getByRole("combobox")).toHaveAccessibleName("My Select");
 });
+
+test("should not display deprecation about uncontrolled Textbox when parent component is controlled", () => {
+  const loggerSpy = jest.spyOn(Logger, "deprecate");
+  render(
+    <SimpleSelect
+      label="Colour"
+      onChange={() => {}}
+      value="1"
+      placeholder="Select a colour"
+    >
+      <Option text="Amber" value="1" />
+    </SimpleSelect>
+  );
+
+  expect(loggerSpy).not.toHaveBeenCalled();
+  loggerSpy.mockClear();
+});
+
+test("should not display deprecation about uncontrolled Textbox when parent component is not controlled", () => {
+  const loggerSpy = jest.spyOn(Logger, "deprecate");
+  render(
+    <SimpleSelect label="Colour" placeholder="Select a colour">
+      <Option text="Amber" value="1" />
+    </SimpleSelect>
+  );
+
+  expect(loggerSpy).not.toHaveBeenCalledWith(
+    "Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+  );
+  loggerSpy.mockClear();
+});

From 37acd17993d1b01486c56a54c5ca1bc8b0650c03 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Fri, 4 Oct 2024 10:32:47 +0000
Subject: [PATCH 3/4] chore(release): 142.13.3

### [142.13.3](https://github.com/Sage/carbon/compare/v142.13.2...v142.13.3) (2024-10-04)

### Bug Fixes

* **badge:** investigate failing RTL test ([5e1d7d6](https://github.com/Sage/carbon/commit/5e1d7d6f6482b533c6fa9afe88f927293e3576c0))
---
 CHANGELOG.md      | 7 +++++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b03ae20603..f965713311 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+### [142.13.3](https://github.com/Sage/carbon/compare/v142.13.2...v142.13.3) (2024-10-04)
+
+
+### Bug Fixes
+
+* **badge:** investigate failing RTL test ([5e1d7d6](https://github.com/Sage/carbon/commit/5e1d7d6f6482b533c6fa9afe88f927293e3576c0))
+
 ### [142.13.2](https://github.com/Sage/carbon/compare/v142.13.1...v142.13.2) (2024-10-04)
 
 
diff --git a/package-lock.json b/package-lock.json
index f9a9064874..ffd2eaa2c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "carbon-react",
-  "version": "142.13.2",
+  "version": "142.13.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "carbon-react",
-      "version": "142.13.2",
+      "version": "142.13.3",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
diff --git a/package.json b/package.json
index fb32f177a8..64db1687e1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "142.13.2",
+  "version": "142.13.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

From 5700920909479dc5448b2ec88782d01d07eaa7cb Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Mon, 7 Oct 2024 15:20:22 +0000
Subject: [PATCH 4/4] chore(release): 142.13.4

### [142.13.4](https://github.com/Sage/carbon/compare/v142.13.3...v142.13.4) (2024-10-07)

### Bug Fixes

* **select:** prevent deprecation warning about uncontrolled textbox from being fired ([6de179c](https://github.com/Sage/carbon/commit/6de179cbae24f36ef8d7a7b122b7ccb8d13ec634)), closes [#6883](https://github.com/Sage/carbon/issues/6883)
---
 CHANGELOG.md      | 7 +++++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f965713311..742635db91 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+### [142.13.4](https://github.com/Sage/carbon/compare/v142.13.3...v142.13.4) (2024-10-07)
+
+
+### Bug Fixes
+
+* **select:** prevent deprecation warning about uncontrolled textbox from being fired ([6de179c](https://github.com/Sage/carbon/commit/6de179cbae24f36ef8d7a7b122b7ccb8d13ec634)), closes [#6883](https://github.com/Sage/carbon/issues/6883)
+
 ### [142.13.3](https://github.com/Sage/carbon/compare/v142.13.2...v142.13.3) (2024-10-04)
 
 
diff --git a/package-lock.json b/package-lock.json
index ffd2eaa2c3..b2e8e54d36 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "carbon-react",
-  "version": "142.13.3",
+  "version": "142.13.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "carbon-react",
-      "version": "142.13.3",
+      "version": "142.13.4",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
diff --git a/package.json b/package.json
index 64db1687e1..8fe77c2d92 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "142.13.3",
+  "version": "142.13.4",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",