GuanM/certimate
1
0
Fork 0
mirror of https://github.com/usual2970/certimate.git synced 2025-06-12 07:29:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(ui): modal form input focus problem

Browse Source
This commit is contained in:
Fu Diwei 2025-01-18 18:24:42 +08:00
parent d5e4ea385d
commit 2171faa330
3 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/components/MultipleInput.tsx
View File

@ -52,7 +52,7 @@ const MultipleInput = ({
draft.push(""); draft.push("");
}); });
setValue(newValue); setValue(newValue);
setTimeout(() => itemRefs.current[newValue.length - 1]?.focus(), 0); setTimeout(() => itemRefs.current[newValue.length - 1]?.focus(), 1);
onValueCreate?.(newValue.length - 1); onValueCreate?.(newValue.length - 1);
}; };
@ -110,7 +110,7 @@ const MultipleInput = ({
draft.splice(index + 1, 0, ""); draft.splice(index + 1, 0, "");
}); });
setValue(newValue); setValue(newValue);
setTimeout(() => itemRefs.current[index + 1]?.focus(), 0); setTimeout(() => itemRefs.current[index + 1]?.focus(), 1);
onValueCreate?.(index + 1); onValueCreate?.(index + 1);
}; };

13
ui/src/components/workflow/node/_SharedNode.tsx
View File

@ -7,7 +7,7 @@ import {
MoreOutlined as MoreOutlinedIcon, MoreOutlined as MoreOutlinedIcon,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { useControllableValue } from "ahooks"; 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 { produce } from "immer";
import { isEqual } from "radash"; import { isEqual } from "radash";
@ -71,9 +71,10 @@ const SharedNodeMenu = ({ trigger, node, disabled, branchId, branchIndex, afterU
const [modalApi, ModelContextHolder] = Modal.useModal(); const [modalApi, ModelContextHolder] = Modal.useModal();
const nameInputRef = useRef<InputRef>(null);
const nameRef = useRef<string>(); const nameRef = useRef<string>();
const handleRenameClick = async () => { const handleRenameConfirm = async () => {
const oldName = node.name; const oldName = node.name;
const newName = nameRef.current?.trim()?.substring(0, 64) || oldName; const newName = nameRef.current?.trim()?.substring(0, 64) || oldName;
if (oldName === newName) { if (oldName === newName) {
@ -125,11 +126,12 @@ const SharedNodeMenu = ({ trigger, node, disabled, branchId, branchIndex, afterU
content: ( content: (
<div className="pb-2 pt-4"> <div className="pb-2 pt-4">
<Input <Input
ref={(ref) => setTimeout(() => ref?.focus({ cursor: "end" }), 0)} ref={nameInputRef}
autoFocus
defaultValue={node.name} defaultValue={node.name}
onChange={(e) => (nameRef.current = e.target.value)} onChange={(e) => (nameRef.current = e.target.value)}
onPressEnter={async () => { onPressEnter={async () => {
await handleRenameClick(); await handleRenameConfirm();
dialog.destroy(); dialog.destroy();
}} }}
/> />
@ -137,8 +139,9 @@ const SharedNodeMenu = ({ trigger, node, disabled, branchId, branchIndex, afterU
), ),
icon: null, icon: null,
okText: t("common.button.save"), okText: t("common.button.save"),
onOk: handleRenameClick, onOk: handleRenameConfirm,
}); });
setTimeout(() => nameInputRef.current?.focus(), 1);
}, },
}, },
{ {

23
ui/src/pages/workflows/WorkflowNew.tsx
View File

@ -1,8 +1,8 @@
import { useState } from "react"; import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { PageHeader } from "@ant-design/pro-components"; 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 { createSchemaFieldRule } from "antd-zod";
import { z } from "zod"; import { z } from "zod";
@ -81,6 +81,17 @@ const WorkflowNew = () => {
}); });
const [formModalOpen, setFormModalOpen] = useState(false); 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) => { const handleTemplateClick = (key: TemplateKeys) => {
setTemplateSelectKey(key); setTemplateSelectKey(key);
setFormModalOpen(true); setFormModalOpen(true);
@ -88,11 +99,6 @@ const WorkflowNew = () => {
const handleModalOpenChange = (open: boolean) => { const handleModalOpenChange = (open: boolean) => {
setFormModalOpen(open); setFormModalOpen(open);
if (!open) {
setTemplateSelectKey(undefined);
formInst.resetFields();
}
}; };
const handleModalFormFinish = () => { const handleModalFormFinish = () => {
@ -155,6 +161,7 @@ const WorkflowNew = () => {
<ModalForm <ModalForm
{...formProps} {...formProps}
autoFocus
disabled={formPending} disabled={formPending}
layout="vertical" layout="vertical"
form={formInst} form={formInst}
@ -167,7 +174,7 @@ const WorkflowNew = () => {
onOpenChange={handleModalOpenChange} onOpenChange={handleModalOpenChange}
> >
<Form.Item name="name" label={t("workflow.new.modal.form.name.label")} rules={[formRule]}> <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>
<Form.Item name="description" label={t("workflow.new.modal.form.description.label")} rules={[formRule]}> <Form.Item name="description" label={t("workflow.new.modal.form.description.label")} rules={[formRule]}>