fix: useMergedTabsterAttributes should accept null/undefined values (#…

…32983)
microsoft · Oct 9, 2024 · b474188 · b474188
1 parent bfc283c
commit b474188
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/change/@fluentui-react-tabster-8181d0cc-f4b6-44ad-b25a-8660a9280d53.json 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
@@ -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
@@ -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
@@ -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;