ant-design-vue/components/vc-select/Selector/Input.tsx

import { cloneElement } from '../../_util/vnode';
import {
  defineComponent,
  getCurrentInstance,
  inject,
  onMounted,
  VNode,
  VNodeChild,
  withDirectives,
} from 'vue';
import PropTypes from '../../_util/vue-types';
import { RefObject } from '../../_util/createRef';
import antInput from '../../_util/antInputDirective';
import classNames from '../../_util/classNames';

interface InputProps {
  prefixCls: string;
  id: string;
  inputElement: VNodeChild;
  disabled: boolean;
  autofocus: boolean;
  autocomplete: string;
  editable: boolean;
  accessibilityIndex: number;
  value: string;
  open: boolean;
  tabindex: number | string;
  /** Pass accessibility props to input */
  attrs: object;
  inputRef: RefObject;
  onKeydown: EventHandlerNonNull;
  onMousedown: EventHandlerNonNull;
  onChange: EventHandlerNonNull;
  onPaste: EventHandlerNonNull;
  onCompositionstart: EventHandlerNonNull;
  onCompositionend: EventHandlerNonNull;
  onFocus: EventHandlerNonNull;
  onBlur: EventHandlerNonNull;
}

const Input = defineComponent<InputProps, { VCSelectContainerEvent: any; blurTimeout: any }>({
  name: 'Input',
  inheritAttrs: false,
  setup(props) {
    if (process.env.NODE_ENV === 'test') {
      onMounted(() => {
        const ins = getCurrentInstance();
        if (props.autofocus) {
          if (ins.vnode && ins.vnode.el) {
            ins.vnode.el.focus();
          }
        }
      });
    }
    return {
      blurTimeout: null,
      VCSelectContainerEvent: inject('VCSelectContainerEvent'),
    };
  },
  render() {
    const {
      prefixCls,
      id,
      inputElement,
      disabled,
      tabindex,
      autofocus,
      autocomplete,
      editable,
      accessibilityIndex,
      value,
      onKeydown,
      onMousedown,
      onChange,
      onPaste,
      onCompositionstart,
      onCompositionend,
      onFocus,
      onBlur,
      open,
      inputRef,
      attrs,
    } = this.$props as InputProps;
    let inputNode: any = withDirectives((inputElement || <input />) as VNode, [[antInput]]);

    const inputProps = inputNode.props || {};
    const {
      onKeydown: onOriginKeyDown,
      onInput: onOriginInput,
      onFocus: onOriginFocus,
      onBlur: onOriginBlur,
      onMousedown: onOriginMouseDown,
      onCompositionstart: onOriginCompositionStart,
      onCompositionend: onOriginCompositionEnd,
      style,
    } = inputProps;
    inputNode = cloneElement(
      inputNode,
      Object.assign(
        {
          id,
          ref: inputRef,
          disabled,
          tabindex,
          autocomplete: autocomplete || 'off',
          autofocus,
          class: classNames(`${prefixCls}-selection-search-input`, inputNode?.props?.className),
          style: { ...style, opacity: editable ? null : 0 },
          role: 'combobox',
          'aria-expanded': open,
          'aria-haspopup': 'listbox',
          'aria-owns': `${id}_list`,
          'aria-autocomplete': 'list',
          'aria-controls': `${id}_list`,
          'aria-activedescendant': `${id}_list_${accessibilityIndex}`,
          ...attrs,
          value: editable ? value : '',
          readonly: !editable,
          unselectable: !editable ? 'on' : null,
          onKeydown: (event: KeyboardEvent) => {
            onKeydown(event);
            if (onOriginKeyDown) {
              onOriginKeyDown(event);
            }
          },
          onMousedown: (event: MouseEvent) => {
            onMousedown(event);
            if (onOriginMouseDown) {
              onOriginMouseDown(event);
            }
          },
          onInput: (event: Event) => {
            onChange(event);
            if (onOriginInput) {
              onOriginInput(event);
            }
          },
          onCompositionstart(event: CompositionEvent) {
            onCompositionstart(event);
            if (onOriginCompositionStart) {
              onOriginCompositionStart(event);
            }
          },
          onCompositionend(event: CompositionEvent) {
            onCompositionend(event);
            if (onOriginCompositionEnd) {
              onOriginCompositionEnd(event);
            }
          },
          onPaste,
          onFocus: (...args: any[]) => {
            clearTimeout(this.blurTimeout);
            onOriginFocus && onOriginFocus(args[0]);
            onFocus && onFocus(args[0]);
            this.VCSelectContainerEvent?.focus(args[0]);
          },
          onBlur: (...args: any[]) => {
            this.blurTimeout = setTimeout(() => {
              onOriginBlur && onOriginBlur(args[0]);
              onBlur && onBlur(args[0]);
              this.VCSelectContainerEvent?.blur(args[0]);
            }, 200);
          },
        },
        inputNode.type === 'textarea' ? {} : { type: 'search' },
      ),
      true,
      true,
    ) as VNode;
    return inputNode;
  },
});

Input.props = {
  inputRef: PropTypes.any,
  prefixCls: PropTypes.string,
  id: PropTypes.string,
  inputElement: PropTypes.any,
  disabled: PropTypes.looseBool,
  autofocus: PropTypes.looseBool,
  autocomplete: PropTypes.string,
  editable: PropTypes.looseBool,
  accessibilityIndex: PropTypes.number,
  value: PropTypes.string,
  open: PropTypes.looseBool,
  tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /** Pass accessibility props to input */
  attrs: PropTypes.object,
  onKeydown: PropTypes.func,
  onMousedown: PropTypes.func,
  onChange: PropTypes.func,
  onPaste: PropTypes.func,
  onCompositionstart: PropTypes.func,
  onCompositionend: PropTypes.func,
  onFocus: PropTypes.func,
  onBlur: PropTypes.func,
};

export default Input;