SearchBox: fix event handling regressions in v8 (#21268)

change/@fluentui-react-fcd957e6-b238-45ac-903b-58074ead0e6a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "SearchBox: properly pass the new value to onChange, and only call onChange once",
+  "packageName": "@fluentui/react",
+  "email": "elcraig@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react/src/components/SearchBox/SearchBox.base.tsx

@@ -61,18 +61,25 @@ export const SearchBoxBase: React.FunctionComponent<ISearchBoxProps> = React.for
   } = props;
 
   const [hasFocus, setHasFocus] = React.useState(false);
+
+  const prevChangeTimestamp = React.useRef<number | undefined>();
   const [uncastValue, setValue] = useControllableValue(
     props.value,
     defaultValue,
-    React.useCallback(
-      (ev: React.ChangeEvent<HTMLInputElement> | undefined) => {
-        onChange?.(ev, ev?.target.value);
-        onChanged?.(ev?.target.value);
-      },
-      [onChange, onChanged],
-    ),
+    (ev: React.ChangeEvent<HTMLInputElement> | undefined, newValue: string) => {
+      if (ev && ev.timeStamp === prevChangeTimestamp.current) {
+        // For historical reasons, SearchBox handles both onInput and onChange (we can't modify this
+        // outside a major version due to potential to break partners' tests and possibly apps).
+        // Only call props.onChange for one of the events.
+        return;
+      }
+      prevChangeTimestamp.current = ev?.timeStamp;
+      onChange?.(ev, newValue);
+      onChanged?.(newValue);
+    },
   );
   const value = String(uncastValue);
+
   const rootElementRef = React.useRef<HTMLDivElement>(null);
   const inputElementRef = React.useRef<HTMLInputElement>(null);
   const mergedRootRef = useMergedRefs(rootElementRef, forwardedRef);