diff --git a/packages/jsonConfig/src/JsonConfigComponent/ConfigAutocomplete.tsx b/packages/jsonConfig/src/JsonConfigComponent/ConfigAutocomplete.tsx index fe2a317cd..314bb0a0f 100644 --- a/packages/jsonConfig/src/JsonConfigComponent/ConfigAutocomplete.tsx +++ b/packages/jsonConfig/src/JsonConfigComponent/ConfigAutocomplete.tsx @@ -20,8 +20,9 @@ class ConfigAutocomplete extends ConfigGeneric - typeof item === 'string' ? { label: item, value: item } : JSON.parse(JSON.stringify(item)), + const selectOptions: { label: string; value: string }[] = this.props.schema.options.map( + (item: { label: string; value: string } | string) => + typeof item === 'string' ? { label: item, value: item } : JSON.parse(JSON.stringify(item)), ); // if __different @@ -42,7 +43,7 @@ class ConfigAutocomplete extends ConfigGeneric option.value === value.value} + filterOptions={(options: { value: string; label: string }[], params) => { + const filtered = options.filter(option => { + if (params.inputValue === '') { + return true; + } + return ( + option.label.toLowerCase().includes(params.inputValue.toLowerCase()) || + option.value.toLowerCase().includes(params.inputValue.toLowerCase()) + ); + }); + + if (this.props.schema.freeSolo && params.inputValue !== '') { + filtered.push({ + label: params.inputValue, + value: params.inputValue, + }); + } + + return filtered; + }} // autoComplete onInputChange={e => { if (!e || !this.props.schema.freeSolo) { diff --git a/packages/jsonConfig/src/JsonConfigComponent/ConfigAutocompleteSendTo.tsx b/packages/jsonConfig/src/JsonConfigComponent/ConfigAutocompleteSendTo.tsx index b8ecb6924..59e619507 100644 --- a/packages/jsonConfig/src/JsonConfigComponent/ConfigAutocompleteSendTo.tsx +++ b/packages/jsonConfig/src/JsonConfigComponent/ConfigAutocompleteSendTo.tsx @@ -99,7 +99,9 @@ class ConfigAutocompleteSendTo extends ConfigGeneric option?.label ?? ''} + isOptionEqualToValue={(option, value) => option.value === value.value} + filterOptions={(options: { value: string; label: string }[], params) => { + const filtered = options.filter(option => { + if (params.inputValue === '') { + return true; + } + return ( + option.label.toLowerCase().includes(params.inputValue.toLowerCase()) || + option.value.toLowerCase().includes(params.inputValue.toLowerCase()) + ); + }); + + if (this.props.schema.freeSolo && params.inputValue !== '') { + filtered.push({ + label: params.inputValue, + value: params.inputValue, + }); + } + + return filtered; + }} + getOptionLabel={(option: { value: string; label: string }): string => option?.label ?? ''} onInputChange={e => { if (!e || !this.props.schema.freeSolo) { return;