mirror of
https://github.com/usual2970/certimate.git
synced 2025-06-10 06:29:52 +00:00
fix(ui): modal form input focus problem
This commit is contained in:
parent
d5e4ea385d
commit
2171faa330
@ -52,7 +52,7 @@ const MultipleInput = ({
|
||||
draft.push("");
|
||||
});
|
||||
setValue(newValue);
|
||||
setTimeout(() => itemRefs.current[newValue.length - 1]?.focus(), 0);
|
||||
setTimeout(() => itemRefs.current[newValue.length - 1]?.focus(), 1);
|
||||
|
||||
onValueCreate?.(newValue.length - 1);
|
||||
};
|
||||
@ -110,7 +110,7 @@ const MultipleInput = ({
|
||||
draft.splice(index + 1, 0, "");
|
||||
});
|
||||
setValue(newValue);
|
||||
setTimeout(() => itemRefs.current[index + 1]?.focus(), 0);
|
||||
setTimeout(() => itemRefs.current[index + 1]?.focus(), 1);
|
||||
|
||||
onValueCreate?.(index + 1);
|
||||
};
|
||||
|
@ -7,7 +7,7 @@ import {
|
||||
MoreOutlined as MoreOutlinedIcon,
|
||||
} from "@ant-design/icons";
|
||||
import { useControllableValue } from "ahooks";
|
||||
import { Button, Card, Drawer, Dropdown, Input, Modal, Popover, Space } from "antd";
|
||||
import { Button, Card, Drawer, Dropdown, Input, type InputRef, Modal, Popover, Space } from "antd";
|
||||
import { produce } from "immer";
|
||||
import { isEqual } from "radash";
|
||||
|
||||
@ -71,9 +71,10 @@ const SharedNodeMenu = ({ trigger, node, disabled, branchId, branchIndex, afterU
|
||||
|
||||
const [modalApi, ModelContextHolder] = Modal.useModal();
|
||||
|
||||
const nameInputRef = useRef<InputRef>(null);
|
||||
const nameRef = useRef<string>();
|
||||
|
||||
const handleRenameClick = async () => {
|
||||
const handleRenameConfirm = async () => {
|
||||
const oldName = node.name;
|
||||
const newName = nameRef.current?.trim()?.substring(0, 64) || oldName;
|
||||
if (oldName === newName) {
|
||||
@ -125,11 +126,12 @@ const SharedNodeMenu = ({ trigger, node, disabled, branchId, branchIndex, afterU
|
||||
content: (
|
||||
<div className="pb-2 pt-4">
|
||||
<Input
|
||||
ref={(ref) => setTimeout(() => ref?.focus({ cursor: "end" }), 0)}
|
||||
ref={nameInputRef}
|
||||
autoFocus
|
||||
defaultValue={node.name}
|
||||
onChange={(e) => (nameRef.current = e.target.value)}
|
||||
onPressEnter={async () => {
|
||||
await handleRenameClick();
|
||||
await handleRenameConfirm();
|
||||
dialog.destroy();
|
||||
}}
|
||||
/>
|
||||
@ -137,8 +139,9 @@ const SharedNodeMenu = ({ trigger, node, disabled, branchId, branchIndex, afterU
|
||||
),
|
||||
icon: null,
|
||||
okText: t("common.button.save"),
|
||||
onOk: handleRenameClick,
|
||||
onOk: handleRenameConfirm,
|
||||
});
|
||||
setTimeout(() => nameInputRef.current?.focus(), 1);
|
||||
},
|
||||
},
|
||||
{
|
||||
|
@ -1,8 +1,8 @@
|
||||
import { useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { PageHeader } from "@ant-design/pro-components";
|
||||
import { Card, Col, Form, Input, Row, Spin, Typography, notification } from "antd";
|
||||
import { Card, Col, Form, Input, type InputRef, Row, Spin, Typography, notification } from "antd";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
@ -81,6 +81,17 @@ const WorkflowNew = () => {
|
||||
});
|
||||
const [formModalOpen, setFormModalOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (formModalOpen) {
|
||||
setTimeout(() => inputRef.current?.focus({ cursor: "end" }), 1);
|
||||
} else {
|
||||
setTemplateSelectKey(undefined);
|
||||
formInst.resetFields();
|
||||
}
|
||||
}, [formModalOpen]);
|
||||
|
||||
const inputRef = useRef<InputRef>(null);
|
||||
|
||||
const handleTemplateClick = (key: TemplateKeys) => {
|
||||
setTemplateSelectKey(key);
|
||||
setFormModalOpen(true);
|
||||
@ -88,11 +99,6 @@ const WorkflowNew = () => {
|
||||
|
||||
const handleModalOpenChange = (open: boolean) => {
|
||||
setFormModalOpen(open);
|
||||
|
||||
if (!open) {
|
||||
setTemplateSelectKey(undefined);
|
||||
formInst.resetFields();
|
||||
}
|
||||
};
|
||||
|
||||
const handleModalFormFinish = () => {
|
||||
@ -155,6 +161,7 @@ const WorkflowNew = () => {
|
||||
|
||||
<ModalForm
|
||||
{...formProps}
|
||||
autoFocus
|
||||
disabled={formPending}
|
||||
layout="vertical"
|
||||
form={formInst}
|
||||
@ -167,7 +174,7 @@ const WorkflowNew = () => {
|
||||
onOpenChange={handleModalOpenChange}
|
||||
>
|
||||
<Form.Item name="name" label={t("workflow.new.modal.form.name.label")} rules={[formRule]}>
|
||||
<Input ref={(ref) => setTimeout(() => ref?.focus({ cursor: "end" }), 0)} placeholder={t("workflow.new.modal.form.name.placeholder")} />
|
||||
<Input ref={inputRef} autoFocus placeholder={t("workflow.new.modal.form.name.placeholder")} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="description" label={t("workflow.new.modal.form.description.label")} rules={[formRule]}>
|
||||
|
Loading…
x
Reference in New Issue
Block a user