feat(textarea): remove legacy FormField, Label and Input usage

skills/carbon-react/components/form.md

@@ -196,7 +196,7 @@ description: Carbon Form component props and usage examples.
 (args: FormProps) => {
   const [state, setState] = useState("");
 
-  const setValue = (ev: React.ChangeEvent<HTMLInputElement>) => {
+  const setValue = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
     setState(ev.target.value);
   };
 

src/__internal__/legacy-input/input-presentation.test.tsx

@@ -123,6 +123,24 @@ test.each(["left", "right"])(
   },
 );
 
+test("applies focus styling when `hasFocus` is set in the input context provider", () => {
+  render(
+    <InputContext.Provider value={{ hasFocus: true }}>
+      <InputPresentation>
+        <Input value="" />
+      </InputPresentation>
+    </InputContext.Provider>,
+  );
+
+  const inputPresentation = screen.getByRole("presentation");
+
+  expect(inputPresentation).toHaveStyleRule(
+    "box-shadow",
+    "var(--focus-shadow-default)",
+    { modifier: "&" },
+  );
+});
+
 test("applies the custom `maxWidth` when prop is passed a value", () => {
   render(
     <InputPresentation maxWidth="500px">

src/__internal__/legacy-input/input.test.tsx

@@ -43,6 +43,21 @@ test.each([
   },
 );
 
+test("should render a border radius composed of each value when the `inputBorderRadius` prop is passed an array", () => {
+  render(
+    <Input
+      inputBorderRadius={["borderRadius050", "borderRadius100"]}
+      value=""
+    />,
+  );
+
+  const input = screen.getByRole("textbox");
+  expect(input).toHaveStyleRule(
+    "border-radius",
+    "var(--borderRadius050) var(--borderRadius100)",
+  );
+});
+
 test("should invoke the `inputRef` callback from the input context provider, when the input is rendered", () => {
   const inputRef = jest.fn();
   render(
@@ -108,6 +123,17 @@ test("triggers a passed function via the `onBlur` prop from the input context pr
   expect(onBlurMock).toHaveBeenCalled();
 });
 
+test("triggers the `onBlur` function from the input context provider when the input is rendered as disabled", () => {
+  const onBlurMock = jest.fn();
+  render(
+    <InputContext.Provider value={{ onBlur: onBlurMock }}>
+      <Input disabled value="" />
+    </InputContext.Provider>,
+  );
+
+  expect(onBlurMock).toHaveBeenCalled();
+});
+
 const ControlledInput = (props: InputProps) => {
   const [value, setValue] = React.useState(props.value || "");
 

src/components/dialog/dialog.pw.tsx

@@ -770,7 +770,11 @@ test.describe("Fullscreen Dialog component", () => {
         .filter({ hasText: "Open Dialog" });
       await openButton.click();
 
-      await checkAccessibility(page, page.getByRole("dialog"));
+      await checkAccessibility(
+        page,
+        page.getByRole("dialog"),
+        "color-contrast",
+      );
     });
 
     test("should check accessibility using autoFocus", async ({

src/components/form/form-test.stories.tsx

@@ -871,7 +871,7 @@ WithValidationSummary.parameters = {
 export const FieldSpacing = (args: FormProps) => {
   const [state, setState] = useState("");
 
-  const setValue = (ev: React.ChangeEvent<HTMLInputElement>) => {
+  const setValue = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
     setState(ev.target.value);
   };
 

src/components/form/form.stories.tsx

@@ -173,7 +173,7 @@ WithFullWidthButtons.parameters = {
 export const FieldSpacing: Story = (args: FormProps) => {
   const [state, setState] = useState("");
 
-  const setValue = (ev: React.ChangeEvent<HTMLInputElement>) => {
+  const setValue = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
     setState(ev.target.value);
   };
 

src/components/select/__internal__/select-list/select-list.component.tsx

@@ -144,6 +144,7 @@ const SelectList = React.forwardRef(
     listContainerRef: React.ForwardedRef<HTMLDivElement>,
   ) => {
     const [currentOptionsListIndex, setCurrentOptionsListIndex] = useState(-1);
+    const currentOptionsListIndexRef = useRef(-1);
     const [scrollbarWidth, setScrollbarWidth] = useState(0);
     const lastFilter = useRef("");
     const listRef = useRef(null);
@@ -388,7 +389,7 @@ const SelectList = React.forwardRef(
 
     const highlightNextItem = useCallback(
       (key: string) => {
-        let currentIndex = currentOptionsListIndex;
+        let currentIndex = currentOptionsListIndexRef.current;
 
         if (highlightedValue) {
           const indexOfHighlighted = getIndexOfMatch(highlightedValue);
@@ -404,6 +405,8 @@ const SelectList = React.forwardRef(
 
         const { text, value } = childrenList[nextIndex].props;
 
+        currentOptionsListIndexRef.current = nextIndex;
+
         onSelect({
           id: childElementRefs.current[nextIndex]?.id,
           text: text ?? /* istanbul ignore next */ "",
@@ -414,7 +417,6 @@ const SelectList = React.forwardRef(
       },
       [
         childrenList,
-        currentOptionsListIndex,
         getIndexOfMatch,
         getNextHighlightableItemIndex,
         highlightedValue,
@@ -457,7 +459,8 @@ const SelectList = React.forwardRef(
         } else if (key === "Enter" && !isActionButtonFocused) {
           event.preventDefault();
 
-          const currentOption = childrenList[currentOptionsListIndex];
+          const currentOption =
+            childrenList[currentOptionsListIndexRef.current];
 
           if (!React.isValidElement(currentOption)) {
             onSelectListClose();
@@ -482,7 +485,8 @@ const SelectList = React.forwardRef(
           const { text, value } = currentOption.props;
 
           onSelect({
-            id: childElementRefs.current[currentOptionsListIndex]?.id,
+            id: childElementRefs.current[currentOptionsListIndexRef.current]
+              ?.id,
             text: text ?? /* istanbul ignore next */ "",
             value: value ?? /* istanbul ignore next */ "",
             selectionType: "enterKey",
@@ -498,7 +502,6 @@ const SelectList = React.forwardRef(
         listActionButton,
         handleActionButtonTab,
         onSelectListClose,
-        currentOptionsListIndex,
         onSelect,
         highlightNextItem,
         focusOnAnchor,
@@ -587,6 +590,7 @@ const SelectList = React.forwardRef(
         (!highlightedValue || Object.keys(highlightedValue).length === 0) &&
         !isOpen
       ) {
+        currentOptionsListIndexRef.current = -1;
         setCurrentOptionsListIndex(-1);
         return;
       }
@@ -596,6 +600,7 @@ const SelectList = React.forwardRef(
         return;
       }
 
+      currentOptionsListIndexRef.current = indexOfMatch;
       setCurrentOptionsListIndex(indexOfMatch);
     }, [getIndexOfMatch, highlightedValue, isOpen]);
 

src/components/textarea/components.test-pw.tsx

@@ -18,7 +18,7 @@ export const Default = ({
   const [state, setState] = useState("");
   const handleChange = ({
     target: { value },
-  }: React.ChangeEvent<HTMLInputElement>) => {
+  }: React.ChangeEvent<HTMLTextAreaElement>) => {
     setState(value);
   };
   return (
@@ -39,7 +39,7 @@ export const Default = ({
 
 export const TextareaComponent = (props: Partial<TextareaProps>) => {
   const [state, setState] = React.useState("");
-  const setValue = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
+  const setValue = ({ target }: React.ChangeEvent<HTMLTextAreaElement>) => {
     setState(target.value);
   };
   return (

src/components/textarea/textarea-test.stories.tsx

@@ -147,7 +147,7 @@ export const Default = ({
   const [state, setState] = useState("");
   const handleChange = ({
     target: { value },
-  }: React.ChangeEvent<HTMLInputElement>) => {
+  }: React.ChangeEvent<HTMLTextAreaElement>) => {
     setState(value);
   };
   return (