@simplybusiness/mobius 6.1.1 → 6.2.0

package/src/components/NumberField/NumberField.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import classNames from "classnames/dedupe";
+import type React from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { type Ref, type RefAttributes, forwardRef } from "react";
-import type { ForwardedRefComponent } from "../../types/components";
+import type { ForwardedRefComponent } from "../../types";
 import {
   TextField,
   type TextFieldElementType,
@@ -44,6 +46,16 @@ export const NumberField: ForwardedRefComponent<
     ...otherProps
   } = props;
 
+  const focusedInputRef = useRef<HTMLInputElement | null>(null);
+  const wheelHandler = useCallback((ev: Event) => ev.preventDefault(), []);
+
+  useEffect(() => {
+    return () => {
+      focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
+      focusedInputRef.current = null;
+    };
+  }, [wheelHandler]);
+
   const containerClasses = classNames("mobius-number-field", className, {
     "--hide-spin-buttons": hideSpinButtons,
   });
@@ -60,9 +72,37 @@ export const NumberField: ForwardedRefComponent<
     }
   };
 
+  const {
+    onFocus: customOnFocus,
+    onBlur: customOnBlur,
+    ...rest
+  } = otherProps as Omit<TextFieldProps, "onFocus" | "onBlur"> & {
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  };
+
+  const forwardedProps: TextFieldProps = {
+    ...rest,
+    onFocus: e => {
+      const el = e.currentTarget as HTMLInputElement;
+      focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
+      focusedInputRef.current = el;
+      el.addEventListener("wheel", wheelHandler, { passive: false });
+      customOnFocus?.(e as React.FocusEvent<HTMLInputElement>);
+    },
+    onBlur: e => {
+      const el = e.currentTarget as HTMLInputElement;
+      el.removeEventListener("wheel", wheelHandler);
+      if (focusedInputRef.current === el) {
+        focusedInputRef.current = null;
+      }
+      customOnBlur?.(e as React.FocusEvent<HTMLInputElement>);
+    },
+  };
+
   return (
     <TextField
-      {...otherProps}
+      {...forwardedProps}
       className={containerClasses}
       onBeforeInput={handleBeforeInput}
       type="number"

package/src/components/Radio/Radio.test.tsx

@@ -793,7 +793,7 @@ describe("controlled vs uncontrolled RadioGroup onChange behavior", () => {
   });
 });
 
-describe("focus behavior", () => {
+describe.skip("focus behavior", () => {
   it("should focus the selected radio option when value changes", () => {
     const redValue = "red";
     const blueValue = "blue";

package/src/components/Radio/RadioGroup.tsx

@@ -9,7 +9,6 @@ import {
   isValidElement,
   useEffect,
   useId,
-  useRef,
   useState,
 } from "react";
 import { useValidationClasses } from "../../hooks";
@@ -97,7 +96,6 @@ const RadioGroup: ForwardedRefComponent<
   } = props;
   const defaultSelected = getDefaultVal(children, value || defaultValue);
   const [selected, setSelected] = useState<string>(defaultSelected);
-  const selectedRef = useRef<HTMLInputElement | null>(null);
 
   // Handle controlled behavior - update state when value prop changes
   useEffect(() => {
@@ -106,11 +104,6 @@ const RadioGroup: ForwardedRefComponent<
     }
   }, [value]);
 
-  // Focus the selected option on re-render
-  useEffect(() => {
-    selectedRef.current?.focus();
-  });
-
   const validationClasses = useValidationClasses({
     validationState,
     isInvalid,
@@ -167,7 +160,6 @@ const RadioGroup: ForwardedRefComponent<
         <div className={radioWrapperClasses}>
           {Children.map(children, child => {
             if (isValidElement(child)) {
-              const props = child.props as { value?: string };
               return cloneElement(
                 child as ReactElement,
                 {
@@ -179,7 +171,6 @@ const RadioGroup: ForwardedRefComponent<
                   isRequired,
                   "aria-describedby": describedBy,
                   onChange,
-                  ref: props.value === selected ? selectedRef : undefined,
                 } as Record<string, unknown>,
               );
             }

package/src/components/index.tsx

@@ -45,3 +45,4 @@ export * from "./Title";
 export * from "./Trust";
 export * from "./ExpandableText";
 export * from "./VisuallyHidden";
+export * from "./MaskedField";