From 7bfd1fc955c0643c8640212d445a65d198f85b86 Mon Sep 17 00:00:00 2001
From: Hong Seungwoo <qksn1541@gmail.com>
Date: Fri, 1 Mar 2024 11:00:49 +0900
Subject: [PATCH] fix: Remove incorrectly timed console.warn call (#4249)

<!--- Provide a general summary of your changes in the Title above -->

## Description
https://github.com/recharts/recharts/issues/2665#issuecomment-1971577209

<!--- Describe your changes in detail -->

## Related Issue
<!--- This project only accepts pull requests related to open issues -->
<!--- If suggesting a new feature or change, please discuss it in an
issue first -->
<!--- If fixing a bug, there should be an issue describing it with steps
to reproduce -->
<!--- Please link to the issue here: -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->

## How Has This Been Tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [x] I have added tests to cover my changes.
- [ ] I have added a storybook story or extended an existing story to
show my changes
- [x] All new and existing tests passed.
---
 src/component/ResponsiveContainer.tsx       |  5 +++--
 test/component/ResponsiveContainer.spec.tsx | 21 +++++++++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/component/ResponsiveContainer.tsx b/src/component/ResponsiveContainer.tsx
index 522a4b9d8b..42525ab7c8 100644
--- a/src/component/ResponsiveContainer.tsx
+++ b/src/component/ResponsiveContainer.tsx
@@ -69,12 +69,13 @@ export const ResponsiveContainer = forwardRef<HTMLDivElement | { current: HTMLDi
     const onResizeRef = useRef<Props['onResize']>();
     onResizeRef.current = onResize;
     useImperativeHandle(ref, () => {
-      return Object.assign(containerRef.current, {
-        get current() {
+      return Object.defineProperty(containerRef.current, 'current', {
+        get() {
           // eslint-disable-next-line no-console
           console.warn('The usage of ref.current.current is deprecated and will no longer be supported.');
           return containerRef.current;
         },
+        configurable: true,
       });
     });
 
diff --git a/test/component/ResponsiveContainer.spec.tsx b/test/component/ResponsiveContainer.spec.tsx
index 873876a37b..6bc8e4dc87 100644
--- a/test/component/ResponsiveContainer.spec.tsx
+++ b/test/component/ResponsiveContainer.spec.tsx
@@ -272,4 +272,25 @@ describe('<ResponsiveContainer />', () => {
 
     expect(element).toHaveStyle({ width: '100%', height: '200px', 'min-width': '200px' });
   });
+
+  it('should trigger console.warn only when accessing ref.current.current, not ref.current', () => {
+    const ref = React.createRef<any>();
+
+    const consoleWarn = vi.fn();
+    vi.spyOn(console, 'warn').mockImplementation(consoleWarn);
+
+    render(
+      <ResponsiveContainer height={100} ref={ref}>
+        <div data-testid="inside" />
+      </ResponsiveContainer>,
+    );
+
+    expect(consoleWarn).not.toHaveBeenCalled();
+    expect(ref.current instanceof HTMLElement).toBe(true);
+    expect(consoleWarn).not.toHaveBeenCalled();
+    expect(ref.current.current instanceof HTMLElement).toBe(true);
+    expect(consoleWarn).toHaveBeenLastCalledWith(
+      'The usage of ref.current.current is deprecated and will no longer be supported.',
+    );
+  });
 });