Input Unit Tests; AutoComplete Unit Tests

package.json

@@ -60,8 +60,7 @@
     "changelog": "node script/generate-changelog.js",
     "init": "node script/init-component",
     "robot": "publish-cli robot-msg",
-    "prepare": "husky install",
-    "update:coverage-badge": "node script/generate-coverage.js"
+    "prepare": "husky install"
   },
   "config": {
     "commitizen": {

src/auto-complete/AutoComplete.tsx

@@ -1,12 +1,12 @@
-import React, { FormEvent, forwardRef, useRef, useState, useImperativeHandle } from 'react';
+import React, { forwardRef, useRef, useState, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import useControlled from '../hooks/useControlled';
 import { ClassName, StyledProps } from '../common';
 import { AutoCompleteOption, TdAutoCompleteProps } from './type';
 import { autoCompleteDefaultProps } from './defaultProps';
 import useCommonClassName from '../hooks/useCommonClassName';
 import { useLocaleReceiver } from '../locale/LocalReceiver';
-import Input, { InputProps, InputRef } from '../input';
+import Input, { InputProps, InputRef, TdInputProps } from '../input';
 import Popup, { PopupProps, PopupRef } from '../popup';
 import AutoCompleteOptionList, { OptionsListProps } from './OptionList';
 
@@ -27,6 +27,7 @@ const AutoComplete = forwardRef<AutoCompleteRef, AutoCompleteProps>((props, ref)
   const [global] = useLocaleReceiver('input');
 
   const [popupVisible, setPopupVisible] = useState(false);
+  const optionListRef = useRef(null);
 
   useImperativeHandle(ref, () => ({
     inputRef: inputRef.current,
@@ -59,7 +60,7 @@ const AutoComplete = forwardRef<AutoCompleteRef, AutoCompleteProps>((props, ref)
     return classNames(classes);
   })();
 
-  const onInputChange = (value: string, context: { e: FormEvent<HTMLInputElement> }) => {
+  const onInputChange: TdInputProps['onChange'] = (value, context) => {
     setTValue(value, context);
   };
 
@@ -75,6 +76,10 @@ const AutoComplete = forwardRef<AutoCompleteRef, AutoCompleteProps>((props, ref)
   const onInnerFocus: InputProps['onFocus'] = (value, context) => {
     setPopupVisible(true);
     props.onFocus?.({ ...context, value });
+    const timer = setTimeout(() => {
+      optionListRef.current?.addKeyboardListener();
+      clearTimeout(timer);
+    }, 0);
   };
 
   const onInnerBlur: InputProps['onBlur'] = (value, context) => {
@@ -128,8 +133,9 @@ const AutoComplete = forwardRef<AutoCompleteRef, AutoCompleteProps>((props, ref)
     />
   );
   // 联想词列表
-  const listContent = (
+  const listContent = Array.isArray(props.options) && (
     <AutoCompleteOptionList
+      ref={optionListRef}
       value={tValue}
       options={props.options}
       size={props.size}
@@ -151,6 +157,7 @@ const AutoComplete = forwardRef<AutoCompleteRef, AutoCompleteProps>((props, ref)
         {bottomContent}
       </div>
     ) : null;
+
   const popupProps = {
     ...props.popupProps,
     overlayInnerStyle: getOverlayStyle,

src/auto-complete/OptionList.tsx

@@ -1,11 +1,12 @@
-import React, { useMemo, useState, MouseEvent, useEffect } from 'react';
+import React, { useMemo, useState, useRef, MouseEvent, useEffect, useImperativeHandle, forwardRef } from 'react';
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';
 import useConfig from '../hooks/useConfig';
 import log from '../_common/js/log';
 import { CommonClassNameType } from '../hooks/useCommonClassName';
 import { AutoCompleteOptionObj, TdAutoCompleteProps } from './type';
 import HighlightOption from './HighlightOption';
+import { on, off } from '../_util/dom';
 
 export interface OptionsListProps {
   sizeClassNames: CommonClassNameType['sizeClassNames'];
@@ -19,10 +20,16 @@ export interface OptionsListProps {
   onSelect?: (keyword: string, context: { e: MouseEvent<HTMLLIElement> | KeyboardEvent | any }) => void;
 }
 
-const OptionsList = (props: OptionsListProps) => {
+export interface OptionsListRef {
+  addKeyboardListener: () => void;
+  removeKeyboardListener: () => void;
+}
+
+const OptionsList = forwardRef<OptionsListRef, OptionsListProps>((props: OptionsListProps, ref) => {
   const { value, onSelect, popupVisible } = props;
-  const [active, setActive] = useState('');
   const { classPrefix } = useConfig();
+  const [active, setActive] = useState('');
+  const activeIndexRef = useRef(-1);
 
   const classes = `${classPrefix}-select__list`;
   const optionClasses = [
@@ -78,27 +85,41 @@ const OptionsList = (props: OptionsListProps) => {
 
   // 键盘事件，上下选择
   const onKeyInnerPress = (e: KeyboardEvent) => {
-    if (e.code === 'ArrowUp' || e.key === 'ArrowUp') {
-      const index = tOptions.findIndex((item) => item.text === active);
-      const newIndex = index - 1 < 0 ? tOptions.length - 1 : index - 1;
-      setActive(tOptions[newIndex].text);
-    } else if (e.code === 'ArrowDown' || e.key === 'ArrowDown') {
-      const index = tOptions.findIndex((item) => item.text === active);
-      const newIndex = index + 1 >= tOptions.length ? 0 : index + 1;
+    if (e.code === 'Enter' || e.key === 'Enter') {
+      onSelect?.(tOptions[activeIndexRef.current].text, { e });
+    } else {
+      const index = activeIndexRef.current;
+      let newIndex;
+      if (e.code === 'ArrowUp' || e.key === 'ArrowUp') {
+        newIndex = index - 1 < 0 ? tOptions.length - 1 : index - 1;
+      } else if (e.code === 'ArrowDown' || e.key === 'ArrowDown') {
+        newIndex = index + 1 >= tOptions.length ? 0 : index + 1;
+      }
       setActive(tOptions[newIndex].text);
-    } else if (e.code === 'Enter' || e.key === 'Enter') {
-      onSelect?.(active, { e });
     }
   };
 
+  const addKeyboardListener = () => {
+    on(document, 'keydown', onKeyInnerPress);
+  };
+
+  const removeKeyboardListener = () => {
+    off(document, 'keydown', onKeyInnerPress);
+  };
+
+  useImperativeHandle(ref, () => ({
+    addKeyboardListener,
+    removeKeyboardListener,
+  }));
+
   useEffect(() => {
     if (popupVisible) {
-      document.addEventListener('keydown', onKeyInnerPress);
+      addKeyboardListener();
     } else {
-      document.removeEventListener('keydown', onKeyInnerPress);
+      removeKeyboardListener();
     }
     return () => {
-      document.removeEventListener('keydown', onKeyInnerPress);
+      removeKeyboardListener();
     };
     // eslint-disable-next-line
   }, [popupVisible]);
@@ -109,6 +130,10 @@ const OptionsList = (props: OptionsListProps) => {
     }
   }, [value]);
 
+  useEffect(() => {
+    activeIndexRef.current = tOptions.findIndex((item) => item.text === active);
+  }, [active, tOptions]);
+
   if (!tOptions.length) return null;
   return (
     <ul className={classes}>
@@ -130,7 +155,7 @@ const OptionsList = (props: OptionsListProps) => {
       })}
     </ul>
   );
-};
+});
 
 OptionsList.displayName = 'OptionsList';
 

src/auto-complete/__tests__/mount.jsx

@@ -11,6 +11,17 @@ export function getNormalAutoCompleteMount(AutoComplete, props, events) {
       text: 'SecondKeyword',
     },
     'ThirdKeyword',
+    {
+      label: 'READONLY_KEYWORD',
+    },
+    {
+      text: 'DISABLED_KEYWORD',
+    },
   ];
   return render(<AutoComplete value="" options={options} {...props} {...events} />);
 }
+
+export function getOptionSlotAutoCompleteMount(AutoComplete, props, events) {
+  const options = ['First', { label: <div className="custom-slot-option">First Keyword</div>, text: 'First Keyword' }];
+  return render(<AutoComplete value="" options={options} {...props} {...events} />);
+}