From 3686094479924d7b4eed133b5f1709a1be3305e0 Mon Sep 17 00:00:00 2001
From: Fhasghrge <1969533391@qq.com>
Date: Sat, 17 Jun 2023 17:36:00 +0800
Subject: [PATCH] fix: autofocus input from dialog no effect

---
 assets/autofocus.less       | 134 ++++++++++++++++++++++++++++++++++++
 assets/index.less           |   1 +
 docs/demo/autofocus.md      |   8 +++
 docs/examples/autofocus.tsx |  31 +++++++++
 package.json                |   1 +
 src/Input.tsx               |   6 ++
 6 files changed, 181 insertions(+)
 create mode 100644 assets/autofocus.less
 create mode 100644 docs/demo/autofocus.md
 create mode 100644 docs/examples/autofocus.tsx

diff --git a/assets/autofocus.less b/assets/autofocus.less
new file mode 100644
index 0000000..e0018a6
--- /dev/null
+++ b/assets/autofocus.less
@@ -0,0 +1,134 @@
+.rc-dialog {
+  position: relative;
+  width: auto;
+  margin: 10px;
+
+  &-wrap {
+    position: fixed;
+    overflow: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1050;
+    -webkit-overflow-scrolling: touch;
+    outline: 0;
+  }
+
+  &-title {
+    margin: 0;
+    font-size: 14px;
+    line-height: 21px;
+    font-weight: bold;
+  }
+
+  &-content {
+    position: relative;
+    background-color: #ffffff;
+    border: none;
+    border-radius: 6px 6px;
+    background-clip: padding-box;
+  }
+
+  &-close {
+    cursor: pointer;
+    border: 0;
+    background: transparent;
+    font-size: 21px;
+    position: absolute;
+    right: 20px;
+    top: 12px;
+    font-weight: 700;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    filter: alpha(opacity=20);
+    opacity: .2;
+    text-decoration: none;
+
+    &-x:after {
+      content: '×'
+    }
+
+    &:hover {
+      opacity: 1;
+      filter: alpha(opacity=100);
+      text-decoration: none;
+    }
+  }
+
+  &-header {
+    padding: 13px 20px 14px 20px;
+    border-radius: 5px 5px 0 0;
+    background: #fff;
+    color: #666;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  &-body {
+    padding: 20px;
+  }
+
+  &-footer {
+    border-top: 1px solid #e9e9e9;
+    padding: 10px 20px;
+    text-align: right;
+    border-radius: 0 0 5px 5px;
+  }
+
+  .effect() {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+  }
+
+  &-zoom-enter, &-zoom-appear {
+    opacity: 0;
+    .effect();
+    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+    animation-play-state: paused;
+  }
+
+  &-zoom-leave {
+    .effect();
+    animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+    animation-play-state: paused;
+  }
+
+  &-zoom-enter&-zoom-enter-active, &-zoom-appear&-zoom-appear-active {
+    animation-name: rcDialogZoomIn;
+    animation-play-state: running;
+  }
+
+  &-zoom-leave&-zoom-leave-active {
+    animation-name: rcDialogZoomOut;
+    animation-play-state: running;
+  }
+
+  @keyframes rcDialogZoomIn {
+    0% {
+      opacity: 0;
+      transform: scale(0, 0);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1, 1);
+    }
+  }
+  @keyframes rcDialogZoomOut {
+    0% {
+
+      transform: scale(1, 1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0, 0);
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .rc-dialog {
+    width: 600px;
+    margin: 30px auto;
+  }
+}
diff --git a/assets/index.less b/assets/index.less
index f916507..cd89f8f 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -26,3 +26,4 @@
     }
   }
 }
+@import './autofocus.less';
diff --git a/docs/demo/autofocus.md b/docs/demo/autofocus.md
new file mode 100644
index 0000000..1ae8407
--- /dev/null
+++ b/docs/demo/autofocus.md
@@ -0,0 +1,8 @@
+---
+title: AutoFocus
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/autofocus.tsx"></code>
diff --git a/docs/examples/autofocus.tsx b/docs/examples/autofocus.tsx
new file mode 100644
index 0000000..89bbd9b
--- /dev/null
+++ b/docs/examples/autofocus.tsx
@@ -0,0 +1,31 @@
+import Dialog from 'rc-dialog';
+import Input from 'rc-input';
+import type { FC } from 'react';
+import React from 'react';
+import '../../assets/index.less';
+
+const Demo: FC = () => {
+  const [vis, setVis] = React.useState(false);
+  return (
+    <div>
+      normal:
+      <Input placeholder="input" autoFocus />
+      <br />
+      <br />
+      dialog:
+      <button onClick={() => setVis((pre) => !pre)}>
+        toggle autoFocus input{' '}
+      </button>
+      <Dialog
+        visible={vis}
+        onClose={() => setVis(false)}
+        style={{ width: 600 }}
+        title={<div>第二个弹框</div>}
+      >
+        <Input placeholder="input" autoFocus />
+      </Dialog>
+    </div>
+  );
+};
+
+export default Demo;
diff --git a/package.json b/package.json
index 6c8eedb..47d7ea6 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "np": "^7.0.0",
     "prettier": "^2.0.5",
     "pretty-quick": "^3.0.0",
+    "rc-dialog": "^9.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "typescript": "^4.0.5",
diff --git a/src/Input.tsx b/src/Input.tsx
index 075ae05..e3ed91d 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -74,6 +74,12 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     setFocused((prev) => (prev && disabled ? false : prev));
   }, [disabled]);
 
+  useEffect(() => {
+    if (rest.autoFocus) {
+      focus();
+    }
+  }, [rest.autoFocus]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (props.value === undefined) {
       setValue(e.target.value);