From fd7457d904f7e9ff28516ca4967dd2d71c6c5699 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Sat, 25 Apr 2020 14:41:36 +0800
Subject: [PATCH] fix: useMergedState not reset when value back to undefined

---
 src/hooks/useMergedState.ts |  7 +++++++
 tests/hooks.test.js         | 25 +++++++++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/src/hooks/useMergedState.ts b/src/hooks/useMergedState.ts
index d4dd9259..04ce186c 100644
--- a/src/hooks/useMergedState.ts
+++ b/src/hooks/useMergedState.ts
@@ -36,5 +36,12 @@ export default function useControlledState<T, R = T>(
     }
   }
 
+  // Effect of reset value to `undefined`
+  React.useEffect(() => {
+    if (value === undefined) {
+      setInnerValue(value);
+    }
+  }, [value]);
+
   return [(mergedValue as unknown) as R, triggerChange];
 }
diff --git a/tests/hooks.test.js b/tests/hooks.test.js
index 352c0b7c..1f9557c5 100644
--- a/tests/hooks.test.js
+++ b/tests/hooks.test.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { mount } from 'enzyme';
 import useMemo from '../src/hooks/useMemo';
+import useMergedState from '../src/hooks/useMergedState';
 
 describe('hooks', () => {
   it('useMemo', () => {
@@ -25,4 +26,28 @@ describe('hooks', () => {
     wrapper.setProps({ data: 'repeat', open: true });
     expect(wrapper.find('div').props().memoData).toEqual('repeat');
   });
+
+  describe('useMergedState', () => {
+    const FC = ({ value }) => {
+      const [val, setVal] = useMergedState(null, { value });
+      return (
+        <input
+          value={val}
+          onChange={e => {
+            setVal(e.target.value);
+          }}
+        />
+      );
+    };
+
+    it('still control of to undefined', () => {
+      const wrapper = mount(<FC value="test" />);
+
+      expect(wrapper.find('input').props().value).toEqual('test');
+
+      wrapper.setProps({ value: undefined });
+      wrapper.update();
+      expect(wrapper.find('input').props().value).toEqual(undefined);
+    });
+  });
 });