[@mantine/core] Image: Fix image alt overflow in Firefox (#4410)

mantinedev · Jun 18, 2023 · 708340b · 708340b
1 parent 8c12a76
commit 708340b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/src/mantine-core/src/Image/Image.test.tsx b/src/mantine-core/src/Image/Image.test.tsx
@@ -58,6 +58,25 @@ describe('@mantine/core/Image', () => {
     expect(container.querySelectorAll('.mantine-Image-placeholder')).toHaveLength(1);
   });
 
+  it('sets overflow to hidden if withPlaceholder is true on img element', () => {
+    render(<Image src={null} alt="test-alt" withPlaceholder />);
+    const image = screen.getByRole('img');
+    expect(image).toHaveStyle({ overflow: 'hidden' });
+  });
+
+  it('uses a user-defined overflow if an imageProps style is set on img element', () => {
+    render(
+      <Image
+        src={null}
+        alt="test-alt"
+        withPlaceholder
+        imageProps={{ style: { overflow: 'unset' } }}
+      />
+    );
+    const image = screen.getByRole('img');
+    expect(image).toHaveStyle({ overflow: 'unset' });
+  });
+
   it('renders given caption', () => {
     const { container: withoutCaption } = render(<Image src="test" />);
     const { container: withCaption } = render(<Image src="test" caption="test-caption" />);

diff --git a/src/mantine-core/src/Image/Image.tsx b/src/mantine-core/src/Image/Image.tsx
@@ -113,7 +113,13 @@ export const Image = forwardRef<HTMLDivElement, ImageProps>((props: ImageProps,
               setError(true);
               typeof imageProps?.onError === 'function' && imageProps.onError(event);
             }}
-            style={{ objectFit: fit, width: rem(width), height: rem(height), ...imageProps?.style }}
+            style={{
+              objectFit: fit,
+              width: rem(width),
+              height: rem(height),
+              ...(isPlaceholder && { overflow: 'hidden' }),
+              ...imageProps?.style,
+            }}
           />
 
           {isPlaceholder && (