Improve filter in JSONconfig autocomplete: #2825

ioBroker · Nov 22, 2024 · 05bc6eb · 05bc6eb
1 parent 702b238
commit 05bc6eb
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 6 deletions.
diff --git a/packages/jsonConfig/src/JsonConfigComponent/ConfigAutocomplete.tsx b/packages/jsonConfig/src/JsonConfigComponent/ConfigAutocomplete.tsx
@@ -20,8 +20,9 @@ class ConfigAutocomplete extends ConfigGeneric<ConfigAutocompleteProps, ConfigAu
         super.componentDidMount();
         const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
 
-        const selectOptions = this.props.schema.options.map((item: any) =>
-            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<ConfigAutocompleteProps, ConfigAu
         }
 
         let item;
-        const options: (string | ConfigItemSelectOption)[] = JSON.parse(JSON.stringify(this.state.selectOptions));
+        const options: ConfigItemSelectOption[] = JSON.parse(JSON.stringify(this.state.selectOptions));
         const isIndeterminate = Array.isArray(this.state.value) || this.state.value === ConfigGeneric.DIFFERENT_VALUE;
 
         if (isIndeterminate) {
@@ -72,6 +73,27 @@ class ConfigAutocomplete extends ConfigGeneric<ConfigAutocompleteProps, ConfigAu
                 freeSolo={!!this.props.schema.freeSolo}
                 value={item}
                 options={options}
+                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;
+                }}
                 // 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
@@ -99,7 +99,9 @@ class ConfigAutocompleteSendTo extends ConfigGeneric<ConfigAutocompleteSendToPro
         }
 
         let item;
-        const options = this.state.selectOptions ? JSON.parse(JSON.stringify(this.state.selectOptions)) : [];
+        const options: { value: string; label: string }[] = this.state.selectOptions
+            ? JSON.parse(JSON.stringify(this.state.selectOptions))
+            : [];
         const isIndeterminate = Array.isArray(this.state.value) || this.state.value === ConfigGeneric.DIFFERENT_LABEL;
 
         if (isIndeterminate) {
@@ -155,8 +157,28 @@ class ConfigAutocompleteSendTo extends ConfigGeneric<ConfigAutocompleteSendToPro
                 fullWidth
                 freeSolo={!!this.props.schema.freeSolo}
                 options={options}
-                // autoComplete
-                getOptionLabel={option => 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;