diff --git a/src/select-input/SelectInput.tsx b/src/select-input/SelectInput.tsx index 930c38fb56..76323b52fd 100644 --- a/src/select-input/SelectInput.tsx +++ b/src/select-input/SelectInput.tsx @@ -1,21 +1,24 @@ -import React, { forwardRef, useRef, useImperativeHandle } from 'react'; +import React, { useRef, useImperativeHandle } from 'react'; import classNames from 'classnames'; import useConfig from '../hooks/useConfig'; -import Popup, { PopupVisibleChangeContext } from '../popup'; +import Popup, { PopupRef, PopupVisibleChangeContext } from '../popup'; import useSingle from './useSingle'; import useMultiple from './useMultiple'; import useOverlayInnerStyle from './useOverlayInnerStyle'; import { TdSelectInputProps } from './type'; import { StyledProps } from '../common'; import { selectInputDefaultProps } from './defaultProps'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { InputRef } from '../input'; export interface SelectInputProps extends TdSelectInputProps, StyledProps { updateScrollTop?: (content: HTMLDivElement) => void; } -const SelectInput = forwardRef((props: SelectInputProps, ref) => { - const selectInputRef = useRef(); - const selectInputWrapRef = useRef(); +const SelectInput = React.forwardRef, SelectInputProps>((originalProps, ref) => { + const props = useDefaultProps(originalProps, selectInputDefaultProps); + const selectInputRef = useRef(); + const selectInputWrapRef = useRef(null); const { classPrefix: prefix } = useConfig(); const { multiple, value, popupVisible, popupProps, borderless, disabled } = props; const { commonInputProps, inputRef, singleInputValue, onInnerClear, renderSelectSingle } = useSingle(props); @@ -81,7 +84,9 @@ const SelectInput = forwardRef((props: SelectInputProps, ref) => { ); - if (!props.tips) return mainContent; + if (!props.tips) { + return mainContent; + } return (
@@ -94,6 +99,5 @@ const SelectInput = forwardRef((props: SelectInputProps, ref) => { }); SelectInput.displayName = 'SelectInput'; -SelectInput.defaultProps = selectInputDefaultProps; export default SelectInput; diff --git a/src/select-input/useMultiple.tsx b/src/select-input/useMultiple.tsx index d4de293592..92877222b7 100644 --- a/src/select-input/useMultiple.tsx +++ b/src/select-input/useMultiple.tsx @@ -1,11 +1,12 @@ import React, { useRef, MouseEvent } from 'react'; import isObject from 'lodash/isObject'; import classNames from 'classnames'; -import { TdSelectInputProps, SelectInputChangeContext, SelectInputKeys } from './type'; +import { TdSelectInputProps, SelectInputChangeContext, SelectInputKeys, SelectInputValue } from './type'; import TagInput, { TagInputValue } from '../tag-input'; import { SelectInputCommonProperties } from './interface'; import useControlled from '../hooks/useControlled'; import useConfig from '../hooks/useConfig'; +import { InputRef } from '../input'; export interface RenderSelectMultipleParams { commonInputProps: SelectInputCommonProperties; @@ -23,7 +24,7 @@ const DEFAULT_KEYS = { export default function useMultiple(props: TdSelectInputProps) { const { value } = props; const { classPrefix } = useConfig(); - const tagInputRef = useRef(); + const tagInputRef = useRef(); const [tInputValue, setTInputValue] = useControlled(props, 'inputValue', props.onInputChange); const iKeys: SelectInputKeys = { ...DEFAULT_KEYS, ...props.keys }; @@ -31,7 +32,7 @@ export default function useMultiple(props: TdSelectInputProps) { if (!(value instanceof Array)) { return isObject(value) ? [value[iKeys.label]] : [value]; } - return value.map((item) => (isObject(item) ? item[iKeys.label] : item)); + return value.map((item: SelectInputValue) => (isObject(item) ? item[iKeys.label] : item)); }; const tags = getTags(); diff --git a/src/select-input/useOverlayInnerStyle.ts b/src/select-input/useOverlayInnerStyle.ts index 54efc4e58f..2730e769ed 100644 --- a/src/select-input/useOverlayInnerStyle.ts +++ b/src/select-input/useOverlayInnerStyle.ts @@ -55,7 +55,9 @@ export default function useOverlayInnerStyle( }; const onInnerPopupVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => { - if (disabled || readonly) return; + if (disabled || readonly) { + return; + } // 如果点击触发元素(输入框)且为可输入状态,则继续显示下拉框 const newVisible = context.trigger === 'trigger-element-click' && allowInput ? true : visible; if (props.popupVisible !== newVisible) { diff --git a/src/select-input/useSingle.tsx b/src/select-input/useSingle.tsx index fa89baec86..d371853d9b 100644 --- a/src/select-input/useSingle.tsx +++ b/src/select-input/useSingle.tsx @@ -3,7 +3,7 @@ import isObject from 'lodash/isObject'; import pick from 'lodash/pick'; import classNames from 'classnames'; import { SelectInputCommonProperties } from './interface'; -import Input, { TdInputProps } from '../input'; +import Input, { InputRef, TdInputProps } from '../input'; import { TdSelectInputProps } from './type'; import { Loading } from '../loading'; import useConfig from '../hooks/useConfig'; @@ -42,7 +42,7 @@ function getInputValue(value: TdSelectInputProps['value'], keys: TdSelectInputPr export default function useSingle(props: TdSelectInputProps) { const { value, keys, loading } = props; const { classPrefix } = useConfig(); - const inputRef = useRef(); + const inputRef = useRef(); const [inputValue, setInputValue] = useControlled(props, 'inputValue', props.onInputChange); const commonInputProps: SelectInputCommonProperties = {