fix(react-tags-preview): Tag getNativeElementProps should conditional…

…ly use 'button' or 'span' (#29236) * fix * fix
microsoft · Sep 25, 2023 · 36a932b · 36a932b
1 parent c9b7dde
commit 36a932b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/change/@fluentui-react-tags-preview-570ee000-103c-4607-b779-4a22424686b5.json b/change/@fluentui-react-tags-preview-570ee000-103c-4607-b779-4a22424686b5.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: useTag `getNativeElementProps` should conditionally use 'button' or 'span'",
+  "packageName": "@fluentui/react-tags-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx b/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx
@@ -53,6 +53,8 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLElement>): T
     }
   });
 
+  const elementType = dismissible ? 'button' : 'span';
+
   return {
     appearance,
     avatarShape: tagAvatarShapeMap[shape],
@@ -63,7 +65,7 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLElement>): T
     size,
 
     components: {
-      root: dismissible ? 'button' : 'span',
+      root: elementType,
       media: 'span',
       icon: 'span',
       primaryText: 'span',
@@ -72,13 +74,13 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLElement>): T
     },
 
     root: slot.always(
-      getNativeElementProps('button', {
+      getNativeElementProps(elementType, {
         ref,
         ...props,
         id,
         ...(dismissible && { onClick: dismissOnClick, onKeyDown: dismissOnKeyDown }),
       }),
-      { elementType: dismissible ? 'button' : 'span' },
+      { elementType },
     ),
 
     media: slot.optional(props.media, { elementType: 'span' }),