diff --git a/packages/libs/wdk-client/src/Views/Question/Params/TypeAheadEnumParam.tsx b/packages/libs/wdk-client/src/Views/Question/Params/TypeAheadEnumParam.tsx index 5e8c55b852..5d601cf158 100644 --- a/packages/libs/wdk-client/src/Views/Question/Params/TypeAheadEnumParam.tsx +++ b/packages/libs/wdk-client/src/Views/Question/Params/TypeAheadEnumParam.tsx @@ -1,8 +1,7 @@ -import React, { useMemo, useState, useCallback } from 'react'; +import React, { useMemo, useCallback } from 'react'; import Select from 'react-select'; import { TypeAheadEnumParam } from '../../../Utils/WdkModel'; -import { Props } from '../../../Views/Question/Params/Utils'; -import { ValueType, InputActionMeta } from 'react-select/src/types'; +import { ValueType } from 'react-select/src/types'; import { isMultiPick } from '../../../Views/Question/Params/EnumParamUtils'; import { safeHtml } from '../../../Utils/ComponentUtils'; @@ -33,8 +32,6 @@ export const TypeAheadEnumParamComponent = (props: TypeAheadParamProps) => { [props.parameter.vocabulary] ); - const [searchTerm, setSearchTerm] = useState(''); - const selection = useMemo(() => { return props.selectedValues.map((value) => ({ value, @@ -42,15 +39,6 @@ export const TypeAheadEnumParamComponent = (props: TypeAheadParamProps) => { })); }, [props.selectedValues, isMultiPick(props.parameter)]); - const onInputChange = useCallback( - (inputValue: string, { action }: InputActionMeta) => { - if (action === 'input-change') { - setSearchTerm(inputValue); - } - }, - [] - ); - const onChange = useCallback( (newSelection: ValueType) => { const newSelectionArray = @@ -61,44 +49,25 @@ export const TypeAheadEnumParamComponent = (props: TypeAheadParamProps) => { : [newSelection as Option]; props.onChange(newSelectionArray.map(({ value }) => value)); - setSearchTerm(''); }, [props.onChange] ); - const filterOption = useCallback( - (option: Option, inputValue: string) => - (inputValue.length >= 3 || option.label.length < 3) && - option.label.toLowerCase().includes(inputValue.toLowerCase()), - [] - ); - - const noOptionsMessage = useCallback( - ({ inputValue }: { inputValue: string }) => - inputValue.length === 0 - ? 'Please input at least 3 characters' - : inputValue.length === 1 - ? 'Please input at least 2 more characters' - : inputValue.length === 2 - ? 'Please input at least 1 more character' - : 'No matches found', - [] - ); - return ( isMulti={isMultiPick(props.parameter)} isSearchable options={options} - filterOption={filterOption} - noOptionsMessage={noOptionsMessage} value={selection} onChange={onChange} - inputValue={searchTerm} - onInputChange={onInputChange} - formatOptionLabel={(option) => safeHtml(option.label)} + formatOptionLabel={formatOptionLabel} + form="DO_NOT_SUBMIT_ON_ENTER" /> ); }; export default TypeAheadEnumParamComponent; + +function formatOptionLabel(option: Option) { + return safeHtml(option.label); +}