fix bug: clear input value every time dialog closed

Author: zhaoyao91

lib/Dialog.js

@@ -65,7 +65,7 @@ function DialogProvider(_ref) {
       setShow = _useState4[1];
 
   var exitedRef = (0, _react.useRef)(true);
-  var cancelRef = (0, _react.useRef)(); // unmount 的时候，如果还有 dialog 开着，启动它的正常 cancel 流程
+  var cancelRef = (0, _react.useRef)(); // when unmount, if some dialog is still open, trigger its canceling process
 
   (0, _react.useEffect)(function () {
     return function () {
@@ -176,8 +176,8 @@ function DialogProvider(_ref) {
   var mergedOptions = _objectSpread({}, options, {}, showOptions, {
     show: show,
     onExited: handleExited
-  }); // 当 animation === false 的时候，onExited 不会触发
-  // 因此，当 show 变成 false 的时候，认为 exited 完成
+  }); // if animation === false, the onExited will not get triggered
+  // so, when show turned into false, it is considered as exited
 
 
   (0, _react.useEffect)(function () {
@@ -235,15 +235,25 @@ function DialogUI(_ref4) {
       refKey = _ref5$refKey === void 0 ? "ref" : _ref5$refKey,
       otherInputProps = _objectWithoutProperties(_ref5, ["defaultValue", "refKey"]);
 
-  var _useState5 = (0, _react.useState)(defaultValue),
+  var _useState5 = (0, _react.useState)(""),
       _useState6 = _slicedToArray(_useState5, 2),
       inputValue = _useState6[0],
       setInputValue = _useState6[1];
 
-  var inputRef = (0, _react.useRef)();
+  var inputRef = (0, _react.useRef)(); // only set input value to default value when it shows up
+
   (0, _react.useEffect)(function () {
-    setInputValue(defaultValue);
-  }, [defaultValue]);
+    if (show) {
+      setInputValue(defaultValue);
+    }
+  }, [show, defaultValue]); // if it is closed without animation, clear the input directly
+
+  (0, _react.useEffect)(function () {
+    if (!show && animation === false) {
+      setInputValue("");
+    }
+  }, [show, animation]); // set autoFocus properly
+
   (0, _react.useEffect)(function () {
     if (show && input && autoFocus) {
       inputRef.current.focus();
@@ -281,11 +291,17 @@ function DialogUI(_ref4) {
     setInputValue(e.target.value);
   }
 
+  function handleExited() {
+    // clear the input value on finish of the animation
+    setInputValue("");
+    onExited();
+  }
+
   return _react["default"].createElement(_Modal["default"], {
     show: show,
     onHide: handleHide,
     centered: centered,
-    onExited: onExited,
+    onExited: handleExited,
     animation: animation,
     scrollable: scrollable,
     size: size

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-easy-dialog",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React Bootstrap Dialog made easy",
   "keywords": [
     "react-bootstrap",

src/Dialog.js

@@ -1,5 +1,3 @@
-// 做的好拿去发布噢
-
 import React, {
   createContext,
   useContext,
@@ -20,7 +18,7 @@ export function DialogProvider({ children, ...options }) {
   const exitedRef = useRef(true);
   const cancelRef = useRef();
 
-  // unmount 的时候，如果还有 dialog 开着，启动它的正常 cancel 流程
+  // when unmount, if some dialog is still open, trigger its canceling process
   useEffect(() => {
     return () => {
       cancelRef.current && cancelRef.current();
@@ -35,7 +33,7 @@ export function DialogProvider({ children, ...options }) {
   const dialog = useMemo(() => {
     function buildMethod(buildOptions, failValue) {
       return async (text, options) => {
-        // 上一次对话尚未结束，调用失败
+        // if the previous dialog is not exited, fails
         if (exitedRef.current === false) return failValue;
 
         return new Promise(resolve => {
@@ -104,8 +102,8 @@ export function DialogProvider({ children, ...options }) {
     onExited: handleExited
   };
 
-  // 当 animation === false 的时候，onExited 不会触发
-  // 因此，当 show 变成 false 的时候，认为 exited 完成
+  // if animation === false, the onExited will not get triggered
+  // so, when show turned into false, it is considered as exited
   useEffect(() => {
     if (!show && mergedOptions.animation === false) {
       handleExited();
@@ -155,15 +153,26 @@ export function DialogUI({
   size
 }) {
   const { defaultValue = "", refKey = "ref", ...otherInputProps } =
-    inputProps || {};
+  inputProps || {};
 
-  const [inputValue, setInputValue] = useState(defaultValue);
+  const [inputValue, setInputValue] = useState("");
   const inputRef = useRef();
 
+  // only set input value to default value when it shows up
+  useEffect(() => {
+    if (show) {
+      setInputValue(defaultValue);
+    }
+  }, [show, defaultValue]);
+
+  // if it is closed without animation, clear the input directly
   useEffect(() => {
-    setInputValue(defaultValue);
-  }, [defaultValue]);
+    if (!show && animation === false) {
+      setInputValue("");
+    }
+  }, [show, animation]);
 
+  // set autoFocus properly
   useEffect(() => {
     if (show && input && autoFocus) {
       inputRef.current.focus();
@@ -201,12 +210,18 @@ export function DialogUI({
     setInputValue(e.target.value);
   }
 
+  function handleExited() {
+    // clear the input value on finish of the animation
+    setInputValue("");
+    onExited();
+  }
+
   return (
     <Modal
       show={show}
       onHide={handleHide}
       centered={centered}
-      onExited={onExited}
+      onExited={handleExited}
       animation={animation}
       scrollable={scrollable}
       size={size}