diff --git a/change/@fluentui-react-avatar-d8ee1b7d-ba8b-46a7-8aa6-bf5d84ebdbfe.json b/change/@fluentui-react-avatar-d8ee1b7d-ba8b-46a7-8aa6-bf5d84ebdbfe.json new file mode 100644 index 0000000000000..a146adcf6616f --- /dev/null +++ b/change/@fluentui-react-avatar-d8ee1b7d-ba8b-46a7-8aa6-bf5d84ebdbfe.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Do not render the image when src prop is undefined.", + "packageName": "@fluentui/react-avatar", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx b/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx index 0fbbc8340169c..7dd2a1737b0c8 100644 --- a/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx +++ b/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx @@ -247,4 +247,10 @@ describe('Avatar', () => { expect(root.getAttribute('aria-label')).toBe('First Last'); expect(root.getAttribute('aria-labelledby')).toBeFalsy(); }); + + it('does not render an image when the src attribute is undefined', () => { + render(); + + expect(screen.queryByAltText('test-image')).toBeNull(); + }); }); diff --git a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx index 7a7b69bd1990b..1c39ef99a557c 100644 --- a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx +++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx @@ -45,7 +45,7 @@ export const useAvatar_unstable = (props: AvatarProps, ref: React.Ref(undefined); - const image: AvatarState['image'] = resolveShorthand(props.image, { + let image: AvatarState['image'] = resolveShorthand(props.image, { defaultProps: { alt: '', role: 'presentation', @@ -54,6 +54,11 @@ export const useAvatar_unstable = (props: AvatarProps, ref: React.Ref setImageHidden(true));