From bfb6dc7133862d9d9e3cb9657e214ef1db44dfcf Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Fri, 15 Sep 2023 10:22:48 +0800
Subject: [PATCH] fix: fix ref issue.

---
 core/src/Container.test.tsx | 34 ++++++++++++++++++++++++++++++++++
 core/src/Container.tsx      |  6 ++----
 2 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 core/src/Container.test.tsx

diff --git a/core/src/Container.test.tsx b/core/src/Container.test.tsx
new file mode 100644
index 00000000..cd15de44
--- /dev/null
+++ b/core/src/Container.test.tsx
@@ -0,0 +1,34 @@
+import userEvent from '@testing-library/user-event';
+import { screen, render, waitFor } from '@testing-library/react';
+import JsonView from './';
+import React from 'react';
+
+const avatar = 'https://i.imgur.com/MK3eW3As.jpg';
+const example = {
+  avatar,
+};
+
+it('renders <JsonView /> Container test case', async () => {
+  const user = userEvent.setup();
+  const divref = React.createRef<HTMLDivElement>();
+  const { container } = render(
+    <JsonView value={example} ref={divref}>
+      <JsonView.Copied data-testid="copied" />
+      <JsonView.CountInfoExtra data-testid="infoExtra" />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  await user.hover(container.lastElementChild!);
+  const copied = screen.getByTestId('copied');
+  expect(copied.style).toHaveProperty('height', '1em');
+  expect(copied.style).toHaveProperty('width', '1em');
+  expect(copied.style).toHaveProperty('cursor', 'pointer');
+  expect(copied.style).toHaveProperty('vertical-align', 'middle');
+  expect(copied.style).toHaveProperty('margin-left', '5px');
+  await user.unhover(container.lastElementChild!);
+  const uncopied = screen.getByTestId('infoExtra');
+  expect(uncopied.nextElementSibling).toBeNull();
+  await waitFor(() => {
+    expect(divref.current instanceof HTMLDivElement).toBeTruthy();
+  });
+});
diff --git a/core/src/Container.tsx b/core/src/Container.tsx
index a811325e..2d3d673d 100644
--- a/core/src/Container.tsx
+++ b/core/src/Container.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useId, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useId } from 'react';
 import { NestedClose } from './comps/NestedClose';
 import { NestedOpen } from './comps/NestedOpen';
 import { KeyValues } from './comps/KeyValues';
@@ -14,9 +14,7 @@ export interface ContainerProps<T extends object> extends React.HTMLAttributes<H
 }
 export const Container = forwardRef(<T extends object>(props: ContainerProps<T>, ref: React.Ref<HTMLDivElement>) => {
   const { className = '', children, parentValue, keyid, level = 1, value, initialValue, keyName, ...elmProps } = props;
-  const $ref = useRef<HTMLDivElement>(null);
   const dispatch = useShowToolsDispatch();
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => $ref.current, [$ref]);
   const subkeyid = useId();
   const defaultClassNames = [className, 'w-rjv-inner'].filter(Boolean).join(' ');
   const reset: React.HTMLAttributes<HTMLDivElement> = {
@@ -24,7 +22,7 @@ export const Container = forwardRef(<T extends object>(props: ContainerProps<T>,
     onMouseLeave: () => dispatch({ [subkeyid]: false }),
   };
   return (
-    <div className={defaultClassNames} {...elmProps} {...reset}>
+    <div className={defaultClassNames} ref={ref} {...elmProps} {...reset}>
       <NestedOpen expandKey={subkeyid} value={value} level={level} keyName={keyName} initialValue={initialValue} />
       <KeyValues expandKey={subkeyid} value={value} level={level} />
       <NestedClose expandKey={subkeyid} value={value} level={level} />