fix: should auto focus in drop-down menu (#2234)
* fix: should auto focus in drop-down menu * fix: fix error in console
This commit is contained in:
		
							parent
							
								
									05058c04b6
								
							
						
					
					
						commit
						57507b310e
					
				@ -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 type={icon as string} /> : icon,
 | 
			
		||||
      children: renderMenuItem(items),
 | 
			
		||||
      children: renderMenuItem(items, info.key),
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    collectMenuItem(item);
 | 
			
		||||
 | 
			
		||||
@ -5,16 +5,35 @@ import { useTranslation } from 'react-i18next';
 | 
			
		||||
export const SelectCollection = ({ value: outValue, onChange }) => {
 | 
			
		||||
  const { t } = useTranslation();
 | 
			
		||||
  const [value, setValue] = useState<string>(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 (
 | 
			
		||||
    <div style={{ width: 210 }}>
 | 
			
		||||
      <Input
 | 
			
		||||
        autoFocus
 | 
			
		||||
        ref={inputRef}
 | 
			
		||||
        allowClear
 | 
			
		||||
        style={{ padding: '0 4px 6px' }}
 | 
			
		||||
        bordered={false}
 | 
			
		||||
 | 
			
		||||
@ -9,7 +9,6 @@ import { createMapBlockSchema } from './utils';
 | 
			
		||||
export const MapBlockInitializer = (props) => {
 | 
			
		||||
  const { insert } = props;
 | 
			
		||||
  const options = useContext(SchemaOptionsContext);
 | 
			
		||||
  console.log('🚀 ~ file: MapBlockInitializer.tsx:12 ~ MapBlockInitializer ~ options:', options);
 | 
			
		||||
  const { getCollectionFieldsOptions } = useCollectionManager();
 | 
			
		||||
  const { t } = useMapTranslation();
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user