I have one annoying problem with autocomplete in MUI 5.
I have several autocomplete components that are connected to huge dictionaries. Because of that, I don't insert the entire collection to "option" param in autocomplete, but call API to search in MongoDB when user inputs something.
In dev env when working with some forms (which have these components) I have a little annoying problem. Some of these components have the option multiple and when I have a value there and start looking for another value in console I have this warning.
MUI: The value provided to Autocomplete is invalid.
None of the options match with `{...}`.
You can use the `isOptionEqualToValue` prop to customize the equality test.
Everything works correctly and I have a valid implemented method "isOptionEqualToValue", but because I do not insert the whole dict to option, and when it searches a new value, API filters the collection for the search text.
Autocomplete thinks the values I chose previously are not valid because it is not in the options array, but are valid throughout the collection.
So my question is, can I get rid of this warning or should I do something else?
Related
I'm using react-select with react-final-form and I need to have two selects, where the selected option in the first select dynamically sets the options for the second select. For example, when option One is selected in the first select, the second select gets options One A and One B.
These selects are used in an array. Here is my codesandbox with initial setup https://codesandbox.io/s/react-final-form-field-arrays-e4mm6?fontsize=14.
I've found two similar examples, but I don't know how to adapt them to my use case.
First, I've found this example for react-final-form which sets field's value using createDecorator, but it's used for the value of the field and not the options prop.
Second, I've found this example for react-select which sets options dynamically using state, but I don't know how I can adapt it to my case, considering field arrays.
I would appreciate any help.
Interesting, problem. Here ya go. I created a <PickOptions/> component that watches the first field and provides the options to the second. It also clears the second field when the value of the first changes, which seemed like something you'd want. You could also set it to the first option in the array or something...
I am working on an input form using ADF. I have an input field in which I want to show a list from which the user can select the value and also require a type option in case the value user want is not in the list.
I use the JDeveloper 12.2.1.3 for development. I have tried using ADF ComboBox component based on a static list. The component gives a list a expected. But I cannot type in a new value in case the value I wanted is not in the list. I can only type whatever is in the list already.
I am looking for something similar to the HTML input-datalist combination which gives a list and allows type if the intended value is not in the list.
The InputListOfValues and other LOV components only allow you to enter data which is present in the list. That is the way these components are designed. It would not make sense to allow other input as you normally use such components in places where you want to make sure the user can only input reference data defined in other data.
Anyway, it's easy to create some kind of component which allows you exactly what you want. I wrote a blog n this here https://tompeez.wordpress.com/2013/02/03/jdeveloper-11-1-1-6-0-afinputtext-with-self-made-look-up-not-using-lov/
From this page you can download and run the ADF Faces Rich Client Demo, which shows all components and what they do.
When using react-select, search results are ordered alphabetically by default. This is a good default but not so nice if I have an exact match that is not first alphabetically. For example, a user may have the following options:
a_react
b_react
c_react
d_react
react
With these options, the user may search for 'react' and not be any closer to selecting the option that exactly matches the search term. Is there any way to optimize for exact matches?
react-select has a prop if you want to have a custom filter - filterOption.
If you want to show better matches based on what a user queries, use match-sorter in combination with onInputChange of react-select to create a custom filter. Here's a working demo.
There are two select inputs. Type l and observe the difference in suggestions.
In react-select you can pass a filterOption property to change how the filtering works. They provide a nice api to do what you want, which is start matching from the beginning of the string rather than anywhere in the string. That would look something like this
filterOption={createFilter({ matchFrom: "start" })}
where createFilter is imported from react-select
#ron4ex has a great answer here. Just wanted to offer another similar solution as I had 1 big issue with match-sorter.
Issue with match-sorter:
My list is a list of family relationships, e.g. "mother", "mother-in-law"
match-sorter would prioritize mother-in-law over mother as I started typing. Only once it was a full match would it prioritize mother. However, react-select kept the focused option as mother-in-law.
Even if I could fix the default focus issue, I would rather "mot" match to "mother" before "mother-in-law".
Enter new solution: Fuse:
Similar implementation as match-sorter
Fuzzy search with lots of customization options
Default config sorted "mother" over "mother-in-law"
const fuse = new Fuse(relationshipTypes, { keys: ["label"] });
<Select>
onInputChange={inputValue => {
setRelationshipOptions(
fuse.search(inputValue).map(value => value.item)
);
}}
</Select>
notice the map on fuse.search as fuse returns a mutated array with the original values in an item key and a second key being the index. Hence, fuse.search().map
I'm looking to do some really complex autocomplete in a textarea kind of like what occurs with libraries like #mention. I'd like to have autocomplete options start after a delimiter, and then continue after periods to quickly navigate object trees. For example, typing # would give an autocomplete menu to all the keys in an object, then after selecting that key, the next period starts an new autocomplete that is an autocomplete for all the keys specific to that previously selected object. If the top level object had 3 different layers, the below would be the end result of the final autocomplete.
#[key1.key2.key3]
'#[this.category.UnitPrice]'
'#[topKey.midKey.finalKey]'
Anyone ever run into this kind of situation?
I am making an app that shows a list of items, and that list can then be refined by multiple filters. If I were to fetch a list of those options from the URL string, then that would allow visitors to share (or bookmark) a link that takes you to a filtered list of data. But my questions is how would I write those options to the URL string?
So the idea is that once a select element has been changed, to refine the results. Let's say for example that it's just the order of the items.
<select ng-model="order" ng-change="changeOrder()">
<option ng-repeat="['date', 'amplitude', 'name'] as option">{{ option }}</option>
</select>
I would want to write that option into the URL string, so that it now contains (if you've selected amplitude) ?order=amplitude. Now, if you refresh the page, the data can easily be sorted by amplitude again.
But when there is a lot of those filters and sorting options, and they can be both set or reset to default, it becomes rather difficult to put those options all together, to check if an option is already in the string so as to not have it twice, and whether to add it behind a ? if there are no other options, or a & if there are other options already defined.
So in other words, what I want to know is does ngRoute provide methods to set parameters; not just read them? So I could do something like $routeParams.set("order", "amplitude").
If you want to change the URL, you should do this through the $location service.
Specifically the $location.search(search, paramValue) will allow you to change the query string values.
I made a plunk that demonstrates both using HTML5 mode and changing the $location using these functions. It can be found here. In order to see the URL change, click the pop-out button .
You don't have to do the string parsing yourself. AngularJS will also allow you (with the same function) to query the currently set parameters. So it's a matter of querying all the URL values, changing the one for which filter you're changing, and then setting the values back.
This is what the second button in the example demonstrates. Even though the first button will only set its own value (and remove the others), the second button will keep all other items as well.
The relevant code:
var values = $location.search();
values.orderThatsUpdating = newOrderValue;
$location.search(values);