fix(react-avatar): Do not render the image when src prop is undefined (#28146)

sopranopillow · web-flow · commit 7eca299aed54 · 2023-06-06T10:10:09.000-07:00
* fix: Do not render the image when src prop is undefined.

* change file

* typo in change file

* requested changes
diff --git a/change/@fluentui-react-avatar-d8ee1b7d-ba8b-46a7-8aa6-bf5d84ebdbfe.json 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
@@ -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(<Avatar image={{ src: undefined, alt: 'test-image' }} />);
+
+    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
@@ -45,7 +45,7 @@ export const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElemen
   );
 
   const [imageHidden, setImageHidden] = React.useState<true | undefined>(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<HTMLElemen
     },
   });
 
+  // Image shouldn't be rendered if its src is not set
+  if (!image?.src) {
+    image = undefined;
+  }
+
   // Hide the image if it fails to load and restore it on a successful load
   if (image) {
     image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));
