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 adab276..afac539 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -30,3 +30,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
+---
+
+
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 (
+