From 57507b310e8c298c14115e191898dde0583b06e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A2=AB=E9=9B=A8=E6=B0=B4=E8=BF=87=E6=BB=A4=E7=9A=84?= =?UTF-8?q?=E7=A9=BA=E6=B0=94-Rairn?= <958414905@qq.com> Date: Wed, 12 Jul 2023 08:39:19 +0800 Subject: [PATCH] fix: should auto focus in drop-down menu (#2234) * fix: should auto focus in drop-down menu * fix: fix error in console --- .../schema-initializer/SchemaInitializer.tsx | 20 ++++++++++-------- .../schema-initializer/SelectCollection.tsx | 21 ++++++++++++++++++- .../src/client/block/MapBlockInitializer.tsx | 1 - 3 files changed, 31 insertions(+), 11 deletions(-) diff --git a/packages/core/client/src/schema-initializer/SchemaInitializer.tsx b/packages/core/client/src/schema-initializer/SchemaInitializer.tsx index e0a4a56b3..6fdab552f 100644 --- a/packages/core/client/src/schema-initializer/SchemaInitializer.tsx +++ b/packages/core/client/src/schema-initializer/SchemaInitializer.tsx @@ -130,7 +130,7 @@ SchemaInitializer.Button = observer( }); } if (item.type === 'itemGroup') { - const label = compile(item.title); + const label = isString(item.title) ? compile(item.title) : item.title; return ( !!item.children?.length && { type: 'group', @@ -203,7 +203,7 @@ SchemaInitializer.Item = function Item(props: SchemaInitializerItemProps) { } if (items?.length > 0) { - const renderMenuItem = (items: SchemaInitializerItemOptions[]) => { + const renderMenuItem = (items: SchemaInitializerItemOptions[], parentKey: string) => { if (!items?.length) { return null; } @@ -212,28 +212,30 @@ SchemaInitializer.Item = function Item(props: SchemaInitializerItemProps) { return { type: 'divider', key: `divider-${indexA}` }; } if (item.type === 'itemGroup') { - const label = compile(item.title); + const label = isString(item.title) ? compile(item.title) : item.title; + const key = `${parentKey}-item-group-${indexA}`; return { type: 'group', - key: item.key || `item-group-${indexA}`, + key, label, title: label, className: styles.nbMenuItemGroup, - children: renderMenuItem(item.children), + children: renderMenuItem(item.children, key), } as MenuProps['items'][0]; } if (item.type === 'subMenu') { const label = compile(item.title); + const key = `${parentKey}-sub-menu-${indexA}`; return { - key: item.key || `sub-menu-${indexA}`, + key, label, title: label, - children: renderMenuItem(item.children), + children: renderMenuItem(item.children, key), }; } const label = compile(item.title); return { - key: item.key || `${info.key}-${item.title}-${indexA}`, + key: `${parentKey}-${item.title}-${indexA}`, label, title: label, onClick: (info) => { @@ -252,7 +254,7 @@ SchemaInitializer.Item = function Item(props: SchemaInitializerItemProps) { key: info.key, label: isString(children) ? compile(children) : children, icon: typeof icon === 'string' ? : icon, - children: renderMenuItem(items), + children: renderMenuItem(items, info.key), }; collectMenuItem(item); diff --git a/packages/core/client/src/schema-initializer/SelectCollection.tsx b/packages/core/client/src/schema-initializer/SelectCollection.tsx index f669b1a99..32efa0644 100644 --- a/packages/core/client/src/schema-initializer/SelectCollection.tsx +++ b/packages/core/client/src/schema-initializer/SelectCollection.tsx @@ -5,16 +5,35 @@ import { useTranslation } from 'react-i18next'; export const SelectCollection = ({ value: outValue, onChange }) => { const { t } = useTranslation(); const [value, setValue] = useState(outValue); + const inputRef = React.useRef(null); // 之所以要增加个内部的 value 是为了防止用户输入过快时造成卡顿的问题 useEffect(() => { setValue(outValue); }, [outValue]); + // TODO: antd 的 Input 的 autoFocus 有 BUG,会不生效,等待官方修复后再简化:https://github.com/ant-design/ant-design/issues/41239 + useEffect(() => { + // 1. 组件在第一次渲染时自动 focus,提高用户体验 + inputRef.current.input.focus(); + + // 2. 当组件已经渲染,并再次显示时,自动 focus + const observer = new IntersectionObserver((entries) => { + if (entries[0].isIntersecting) { + inputRef.current.input.focus(); + } + }); + + observer.observe(inputRef.current.input); + return () => { + observer.disconnect(); + }; + }, []); + return (
{ const { insert } = props; const options = useContext(SchemaOptionsContext); - console.log('🚀 ~ file: MapBlockInitializer.tsx:12 ~ MapBlockInitializer ~ options:', options); const { getCollectionFieldsOptions } = useCollectionManager(); const { t } = useMapTranslation();