@simplybusiness/mobius 6.5.2 → 6.5.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "6.5.2",
+  "version": "6.5.3",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",

package/src/components/Combobox/Combobox.test.tsx

@@ -676,8 +676,8 @@ describe("Combobox", () => {
           render(<Combobox label="Fruit" options={options} />);
           const input = screen.getByRole("combobox");
           await user.tab();
-          const visibleOptions = screen.getAllByRole("option");
           await user.keyboard("{arrowdown}");
+          const visibleOptions = screen.getAllByRole("option");
           expect(input).toHaveAttribute(
             "aria-activedescendant",
             `${visibleOptions[0].id}`,

package/src/components/Combobox/Combobox.tsx

@@ -62,6 +62,8 @@ const ComboboxInner = forwardRef(
     const listboxId = useId();
     const statusId = useId();
     const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const userInteractedRef = useRef(false);
+    const justSelectedRef = useRef(false);
     const { down } = useBreakpoint();
     const isMobile = down("md");
 
@@ -72,9 +74,43 @@ const ComboboxInner = forwardRef(
         clearTimeout(blurTimeoutRef.current);
         blurTimeoutRef.current = null;
       }
-      setIsOpen(true);
+
+      // Check if this is natural focus (user click/Tab) or programmatic focus
+      const isNaturalFocus =
+        userInteractedRef.current || e.relatedTarget !== null;
+      if (userInteractedRef.current) {
+        userInteractedRef.current = false;
+      }
+
+      // Block opening only if programmatic focus right after selection
+      if (justSelectedRef.current && !isNaturalFocus) {
+        justSelectedRef.current = false;
+        return;
+      }
+
+      // Open dropdown for natural focus
+      if (isNaturalFocus) {
+        setIsOpen(true);
+        justSelectedRef.current = false;
+      }
     };
 
+    useEffect(() => {
+      if (!inputRef || typeof inputRef === "function") return;
+      const inputElement = inputRef.current;
+      if (!inputElement) return;
+
+      const handleMouseDown = () => {
+        // Track that user clicked/interacted with input
+        userInteractedRef.current = true;
+      };
+
+      inputElement.addEventListener("mousedown", handleMouseDown);
+      return () => {
+        inputElement.removeEventListener("mousedown", handleMouseDown);
+      };
+    }, [inputRef]);
+
     useOnUnmount(() => {
       if (blurTimeoutRef.current) {
         clearTimeout(blurTimeoutRef.current);
@@ -84,7 +120,12 @@ const ComboboxInner = forwardRef(
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       const newValue = e.target.value;
       setInputValue(newValue);
+      justSelectedRef.current = false;
       setIsChanging(true);
+      // Only open immediately for sync options; async options controlled by useEffect
+      if (!asyncOptions) {
+        setIsOpen(true);
+      }
       clearHighlight();
       onChange?.(e);
     };
@@ -107,6 +148,7 @@ const ComboboxInner = forwardRef(
 
       // Prevent re-fetching options after selecting an option
       skipNextDebounceRef.current = true;
+      justSelectedRef.current = true;
 
       setIsChanging(false);
       setIsOpen(false);
@@ -147,13 +189,18 @@ const ComboboxInner = forwardRef(
     };
 
     const handleBlur = (e: FocusEvent<Element, Element>) => {
-      // Force selection if user has matched an entry
-      const typedText = inputValue.trim().toLowerCase();
-      const highlightedOption = getHighlightedOption();
-      const label = getOptionLabel(highlightedOption);
+      // Force selection if user has matched an entry by typing (not already selected)
+      // Defer this to allow natural focus flow to complete first
+      if (!justSelectedRef.current) {
+        const typedText = inputValue.trim().toLowerCase();
+        const highlightedOption = getHighlightedOption();
+        const label = getOptionLabel(highlightedOption);
 
-      if (typedText === label?.toLowerCase()) {
-        handleOptionSelect(highlightedOption as T);
+        if (typedText === label?.toLowerCase()) {
+          setTimeout(() => {
+            handleOptionSelect(highlightedOption as T);
+          }, 0);
+        }
       }
 
       blurTimeoutRef.current = setTimeout(() => {
@@ -166,21 +213,25 @@ const ComboboxInner = forwardRef(
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
+          justSelectedRef.current = false;
           setIsOpen(true);
           highlightNextOption();
           break;
         case "ArrowUp":
           e.preventDefault();
+          justSelectedRef.current = false;
           setIsOpen(true);
           highlightPreviousOption();
           break;
         case "Home":
           e.preventDefault();
+          justSelectedRef.current = false;
           setIsOpen(true);
           highlightFirstOption();
           break;
         case "End":
           e.preventDefault();
+          justSelectedRef.current = false;
           setIsOpen(true);
           highlightLastOption();
           break;
@@ -227,19 +278,30 @@ const ComboboxInner = forwardRef(
       className,
     );
 
+    const getStatusMessage = () => {
+      if (isLoading) return "Loading options";
+      if (!filteredOptions || filteredOptions.length === 0) {
+        return isChanging ? "No options found" : "";
+      }
+      const count = isOptionGroup(filteredOptions)
+        ? filteredOptions.reduce((sum, group) => sum + group.options.length, 0)
+        : filteredOptions.length;
+      return isOpen && isChanging
+        ? `${count} option${count === 1 ? "" : "s"} available`
+        : "";
+    };
+
     return (
       <div id={id} data-testid="mobius-combobox__wrapper" className={classes}>
-        {isLoading && (
-          <VisuallyHidden
-            role="status"
-            aria-live="polite"
-            id={statusId}
-            elementType="div"
-            className="mobius-combobox__status"
-          >
-            Loading options
-          </VisuallyHidden>
-        )}
+        <VisuallyHidden
+          role="status"
+          aria-live="polite"
+          id={statusId}
+          elementType="div"
+          className="mobius-combobox__status"
+        >
+          {getStatusMessage()}
+        </VisuallyHidden>
         <TextField
           {...otherProps}
           className="mobius-combobox__input"
@@ -254,6 +316,7 @@ const ComboboxInner = forwardRef(
           aria-describedby={isLoading ? statusId : undefined}
           aria-autocomplete="list"
           aria-haspopup="listbox"
+          aria-owns={listboxId}
           aria-controls={listboxId}
           aria-expanded={isOpen}
           aria-activedescendant={

package/src/components/TextOrHTML/TextOrHTML.test.tsx

@@ -1,4 +1,6 @@
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
 import { TextOrHTML } from ".";
 
 const CLASS_NAME = "mobius-text";
@@ -124,4 +126,61 @@ describe("TextOrHTML", () => {
       expect(screen.getByTestId("test")).toHaveClass("--has-line-height-tight");
     });
   });
+
+  // See: https://github.com/facebook/react/issues/31660
+  describe("React 19 dangerouslySetInnerHTML regression", () => {
+    it("should not replace innerHTML on re-render when text prop hasn't changed", async () => {
+      const user = userEvent.setup();
+      const TestWrapper = () => {
+        const [, setCounter] = useState(0);
+        return (
+          <>
+            <TextOrHTML text="<strong data-testid='content'>Text</strong>" />
+            <button onClick={() => setCounter(c => c + 1)} data-testid="btn">
+              Re-render
+            </button>
+          </>
+        );
+      };
+
+      render(<TestWrapper />);
+
+      const element = screen.getByTestId("content");
+      element.setAttribute("data-marker", "test");
+
+      await user.click(screen.getByTestId("btn"));
+
+      // If innerHTML was unnecessarily replaced, the marker would be lost
+      expect(screen.getByTestId("content")).toHaveAttribute(
+        "data-marker",
+        "test",
+      );
+    });
+
+    it("should update innerHTML when text prop changes", async () => {
+      const user = userEvent.setup();
+      const TestWrapper = () => {
+        const [text, setText] = useState(
+          "<span data-testid='content'>A</span>",
+        );
+        return (
+          <>
+            <TextOrHTML text={text} />
+            <button
+              onClick={() => setText("<span data-testid='content'>B</span>")}
+              data-testid="btn"
+            >
+              Update
+            </button>
+          </>
+        );
+      };
+
+      render(<TestWrapper />);
+      expect(screen.getByTestId("content")).toHaveTextContent("A");
+
+      await user.click(screen.getByTestId("btn"));
+      expect(screen.getByTestId("content")).toHaveTextContent("B");
+    });
+  });
 });

package/src/components/TextOrHTML/TextOrHTML.tsx

@@ -1,5 +1,5 @@
 import type { Ref } from "react";
-import { forwardRef } from "react";
+import { forwardRef, useMemo } from "react";
 import type { ForwardedRefComponent } from "../../types/components";
 import type { TextElementType, TextProps } from "../Text/Text";
 import { Text } from "../Text/Text";
@@ -33,10 +33,14 @@ const TextOrHTML: ForwardedRefComponent<TextOrHTMLProps, TextElementType> =
     ) => {
       const DangerousComponent = htmlElementType;
 
+      // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders
+      // See: https://github.com/facebook/react/issues/31660
+      const dangerousHTML = useMemo(() => ({ __html: text }), [text]);
+
       const dangerousElement = (
         <DangerousComponent
           className={htmlClassName}
-          dangerouslySetInnerHTML={{ __html: text }}
+          dangerouslySetInnerHTML={dangerousHTML}
         />
       );