Still trigger deprecated onChanged property of Toggle (#17296)

* Still trigger deprecated `onChanged` property of Toggle until it is removed * Add types * Change files
microsoft · Mar 5, 2021 · 5e06dfb · 5e06dfb
1 parent 73bf957
commit 5e06dfb
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/change/@fluentui-react-dbda8e69-21d6-41e3-8492-e871d9c396f4.json b/change/@fluentui-react-dbda8e69-21d6-41e3-8492-e871d9c396f4.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Still trigger deprecated `onChanged` property of Toggle until it is removed",
+  "packageName": "@fluentui/react",
+  "email": "miclo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/Toggle/Toggle.base.tsx b/packages/react/src/components/Toggle/Toggle.base.tsx
@@ -25,14 +25,26 @@ export const ToggleBase: React.FunctionComponent<IToggleProps> = React.forwardRe
       // eslint-disable-next-line deprecation/deprecation
       onAriaLabel,
       onChange,
+      // eslint-disable-next-line deprecation/deprecation
+      onChanged,
       onClick: onToggleClick,
       onText,
       role,
       styles,
       theme,
     } = props;
 
-    const [checked, setChecked] = useControllableValue(controlledChecked, defaultChecked, onChange);
+    const [checked, setChecked] = useControllableValue(
+      controlledChecked,
+      defaultChecked,
+      React.useCallback(
+        (ev: React.MouseEvent<HTMLElement>, isChecked: boolean) => {
+          onChange?.(ev, isChecked);
+          onChanged?.(isChecked);
+        },
+        [onChange, onChanged],
+      ),
+    );
 
     const classNames = getClassNames(styles!, {
       theme: theme!,