fix(inputpicker): fix the input does not work when focused by keyboard

Author: simonguo

src/InputPicker/InputAutosize.tsx

@@ -31,6 +31,7 @@ export interface InputAutosizeProps {
   placeholder?: string;
   style?: React.CSSProperties;
   value?: string;
+  tabIndex?: number;
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
   onAutosize?: (inputWidth: number) => void;
 }
@@ -91,7 +92,8 @@ const InputAutosize = React.forwardRef(
       placeholder,
       inputClassName,
       inputStyle,
-      inputId = uniqueId
+      inputId = uniqueId,
+      tabIndex
     } = props;
 
     const rootRef = useRef();
@@ -140,6 +142,7 @@ const InputAutosize = React.forwardRef(
 
     htmlInputProps.className = inputClassName;
     htmlInputProps.style = nextInputStyle;
+    htmlInputProps.tabIndex = tabIndex;
 
     if (isIE()) {
       // On Internet Explorer, an `x` symbol will appear in the input box.

src/InputPicker/InputPicker.tsx

@@ -57,6 +57,8 @@ export type ValueType = any;
 export interface InputPickerProps<T = ValueType>
   extends FormControlPickerProps<T, InputPickerLocale, InputItemDataType>,
     SelectProps<T> {
+  tabIndex?: number;
+
   multi?: boolean;
 
   /** Settings can create new options */
@@ -126,6 +128,7 @@ const InputPicker: PickerComponent<InputPickerProps> = React.forwardRef(
       labelKey,
       listProps,
       id,
+      tabIndex,
       sort,
       renderMenu,
       renderExtraFooter,
@@ -164,8 +167,6 @@ const InputPicker: PickerComponent<InputPickerProps> = React.forwardRef(
     const [maxWidth, setMaxWidth] = useState(100);
     const [newData, setNewData] = useState([]);
     const [uncontrolledOpen, setOpen] = useState(defaultOpen);
-    // Use component active state to support keyboard events.
-    const [active, setActive] = useState(false);
     const open = isUndefined(controlledOpen) ? uncontrolledOpen : controlledOpen;
 
     const getAllData = useCallback(() => [].concat(uncontrolledData, newData), [
@@ -516,11 +517,12 @@ const InputPicker: PickerComponent<InputPickerProps> = React.forwardRef(
     }, [setFocusItemValue, setSearchKeyword, onClose, value, multi]);
 
     const handleFocus = useCallback(() => {
-      setActive(true);
+      setOpen(true);
+      triggerRef.current?.open();
     }, []);
 
     const handleBlur = useCallback(() => {
-      setActive(false);
+      setOpen(false);
     }, []);
 
     const handleEnter = useCallback(() => {
@@ -675,7 +677,7 @@ const InputPicker: PickerComponent<InputPickerProps> = React.forwardRef(
 
     const classes = merge(pickerClasses, {
       [prefix`tag`]: multi,
-      [prefix`focused`]: open || active
+      [prefix`focused`]: open
     });
     const searching = !!searchKeyword && open;
     const displaySearchInput = searchable && !disabled;
@@ -721,7 +723,7 @@ const InputPicker: PickerComponent<InputPickerProps> = React.forwardRef(
             onClean={handleClean}
             cleanable={cleanable && !disabled}
             hasValue={hasValue}
-            active={active}
+            active={open}
             disabled={disabled}
             placement={placement}
             inputValue={value}
@@ -733,6 +735,7 @@ const InputPicker: PickerComponent<InputPickerProps> = React.forwardRef(
             {displaySearchInput && (
               <InputSearch
                 {...inputProps}
+                tabIndex={tabIndex}
                 readOnly={readOnly}
                 onBlur={createChainedFunction(handleBlur, onBlur)}
                 onFocus={createChainedFunction(handleFocus, onFocus)}

src/InputPicker/test/InputPickerSpec.js

@@ -325,4 +325,9 @@ describe('InputPicker', () => {
     assert.equal(instance.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
     assert.notInclude(instance.className, 'rs-picker-has-value');
   });
+
+  it('Should set a tabindex for input', () => {
+    const instance = getDOMNode(<InputPicker tabIndex={10} />);
+    assert.equal(instance.querySelector('.rs-picker-search-input').getAttribute('tabindex'), '10');
+  });
 });

src/Picker/utils.ts

@@ -147,7 +147,6 @@ export function onMenuKeyDown(event: React.KeyboardEvent, events: EventsProps) {
     case KEY_CODE.ESC:
     case KEY_CODE.TAB:
       esc?.(event);
-      event.preventDefault();
       break;
     // left arrow
     case KEY_CODE.LEFT:
@@ -409,7 +408,7 @@ export const useToggleKeyDownEvent = (props: ToggleKeyDownEventProps) => {
         }
       }
 
-      if (event.keyCode === KEY_CODE.ESC) {
+      if (event.keyCode === KEY_CODE.ESC || event.keyCode === KEY_CODE.TAB) {
         handleClose();
       }
 

src/TagPicker/test/TagPickerSpec.js

@@ -347,4 +347,9 @@ describe('TagPicker', () => {
     assert.equal(instance.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
     assert.notInclude(instance.className, 'rs-picker-has-value');
   });
+
+  it('Should set a tabindex for input', () => {
+    const instance = getDOMNode(<TagPicker tabIndex={10} />);
+    assert.equal(instance.querySelector('input[type="text"]').getAttribute('tabindex'), '10');
+  });
 });