From b474188d1a98e1ee24c864d324278c6003e834c9 Mon Sep 17 00:00:00 2001
From: ling1726 <lingfangao@hotmail.com>
Date: Wed, 9 Oct 2024 11:01:49 +0200
Subject: [PATCH] fix: useMergedTabsterAttributes should accept null/undefined
 values (#32983)

---
 ...abster-8181d0cc-f4b6-44ad-b25a-8660a9280d53.json |  7 +++++++
 .../react-tabster/etc/react-tabster.api.md          |  2 +-
 .../src/hooks/useMergeTabsterAttributes.test.ts     | 13 +++++++++++++
 .../src/hooks/useMergeTabsterAttributes.ts          |  4 ++--
 4 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 change/@fluentui-react-tabster-8181d0cc-f4b6-44ad-b25a-8660a9280d53.json

diff --git a/change/@fluentui-react-tabster-8181d0cc-f4b6-44ad-b25a-8660a9280d53.json b/change/@fluentui-react-tabster-8181d0cc-f4b6-44ad-b25a-8660a9280d53.json
new file mode 100644
index 0000000000000..006549ba1c128
--- /dev/null
+++ b/change/@fluentui-react-tabster-8181d0cc-f4b6-44ad-b25a-8660a9280d53.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: useMergedTabsterAttributes should accept null/undefined values",
+  "packageName": "@fluentui/react-tabster",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tabster/etc/react-tabster.api.md b/packages/react-components/react-tabster/etc/react-tabster.api.md
index 591c0489f6883..70522ba596b62 100644
--- a/packages/react-components/react-tabster/etc/react-tabster.api.md
+++ b/packages/react-components/react-tabster/etc/react-tabster.api.md
@@ -1486,7 +1486,7 @@ export function useFocusWithin<TElement extends HTMLElement = HTMLElement>(): Re
 export function useKeyboardNavAttribute<E extends HTMLElement>(): RefObject<E>;
 
 // @internal
-export const useMergedTabsterAttributes_unstable: (...attributes: Partial<Types.TabsterDOMAttribute>[]) => Types.TabsterDOMAttribute;
+export const useMergedTabsterAttributes_unstable: (...attributes: (Partial<Types.TabsterDOMAttribute> | null | undefined)[]) => Types.TabsterDOMAttribute;
 
 // @public
 export const useModalAttributes: (options?: UseModalAttributesOptions) => {
diff --git a/packages/react-components/react-tabster/src/hooks/useMergeTabsterAttributes.test.ts b/packages/react-components/react-tabster/src/hooks/useMergeTabsterAttributes.test.ts
index 93bf0faf1b1cf..963afde141032 100644
--- a/packages/react-components/react-tabster/src/hooks/useMergeTabsterAttributes.test.ts
+++ b/packages/react-components/react-tabster/src/hooks/useMergeTabsterAttributes.test.ts
@@ -26,4 +26,17 @@ describe('useMergedTabsterAttributes', () => {
     const { result } = renderHook(() => useMergedTabsterAttributes_unstable());
     expect(result.current).toEqual({ 'data-tabster': undefined });
   });
+
+  it('should ignore undefined/null values', () => {
+    const { result } = renderHook(() =>
+      useMergedTabsterAttributes_unstable(
+        { 'data-tabster': '{"a":"1"}' },
+        null,
+        { 'data-tabster': '{"b":"2"}' },
+        undefined,
+        { 'data-tabster': '{"c":"3"}' },
+      ),
+    );
+    expect(result.current).toEqual({ 'data-tabster': '{"a":"1","b":"2","c":"3"}' });
+  });
 });
diff --git a/packages/react-components/react-tabster/src/hooks/useMergeTabsterAttributes.ts b/packages/react-components/react-tabster/src/hooks/useMergeTabsterAttributes.ts
index 1fdf25fd721c3..111575ca06cd4 100644
--- a/packages/react-components/react-tabster/src/hooks/useMergeTabsterAttributes.ts
+++ b/packages/react-components/react-tabster/src/hooks/useMergeTabsterAttributes.ts
@@ -10,12 +10,12 @@ import { Types, TABSTER_ATTRIBUTE_NAME } from 'tabster';
  * @returns single merged tabster attribute
  */
 export const useMergedTabsterAttributes_unstable = (
-  ...attributes: Partial<Types.TabsterDOMAttribute>[]
+  ...attributes: (Partial<Types.TabsterDOMAttribute> | null | undefined)[]
 ): Types.TabsterDOMAttribute => {
   'use no memo';
 
   const stringAttributes = attributes.reduce<string[]>((acc, curr) => {
-    if (curr[TABSTER_ATTRIBUTE_NAME]) {
+    if (curr?.[TABSTER_ATTRIBUTE_NAME]) {
       acc.push(curr[TABSTER_ATTRIBUTE_NAME]);
     }
     return acc;