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...
Related
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 am facing a couple of issues with my dynamic form ( add, remove fields ) using redux form (redux-form/immutable).
Validation fails for dynamically added fields, since initialValues doesn't have a default value for it.
When I remove a newly added field after having added some text to it, the text entered shows up in a field I add subsequently.
I have gone through Erik Rasmussen's presentation here https://www.youtube.com/watch?v=eDTi7lYR1VU&feature=youtu.be , and I am following a similar approach.
I can see the form data in the state using redux devtools. Also, I found in the documentation that we can change the form's state. ( http://redux-form.com/6.4.0/docs/api/ReducerPlugin.md/ )
I am trying to see if I can make it work using this. Will update my observations/findings here. Please let me know if there is an easier way to achieve this.
Using FieldArrays solves the problem. It takes care of updating the form state in redux in a proper way. Earlier I was just using Fields and iterating over List stored in the component's state and modifying it on add/delete.
I'm having trouble using ng-options with filters.
The problem is that when an option is removed by a filter, the model of the select element retains the value of the removed option.
Here is a plunker. I have two filters working on the ng-options set. One that removes duplicates from the list of options, and one that removes nulls. You can see the problem I am speaking of by following these steps.
In the "Preferred Email" dropdown, select the last email option, 'jimbob#yahoob.com'.
Delete the text in the "Other Email" input box.
You can see now that because "Other Email" is null, it is no longer an available option, and the dropdown has defaulted to "Please Select Preferred Email". However the model of the select element still has that object assigned to it.
Same problem different context.
In the "Preferred Email" dropdown, select the option 'jimbob#yahooz.com'.
Now delete the 'z' in "jimbob#yahooz.com"
Upon doing so, the values in the two input boxes ('Email' and 'Home Email') become duplicates, and the second one ('Home Email') becomes filtered out of the available options. However the object that was just filtered remains assigned to the model.
Edit: My solution (Can anyone do better?)
Here (plunker) is the best I could come up with. I'm new to angular and can't help but think there is a better way to do this, I think this solution is "bad" but it works.
Essentially I pass into the filters a reference to the scope (this.contact) along with the name of which default item I am working with ('default_email' or 'default_phone'). If the filter is removing an item from the options set, it checks if it is the default, and if it is, sets the default to undefined.
I also added a bit more code, to get more context as to what I am working towards.
I know this is old, but I spent a long time trying to figure out the best way to handle this.
Turns out it's fixed in Angular 1.4! Try replacing the Angular version in your original plunker with 1.4, and the problem just goes away. I found this out by trying various versions until I narrowed it down.
I'm using ExtJS 3. I have a formPanel with many "cloned" fields and I gave every field the name "price[]". After submit I would like to loop through every field that has the name "price[]" and get their values one at a time to be checked against something in the database.
Note: there are other fields in this form so that's why I need to specify witch items to get from it, by name. I know how to submit the form, I just need to loop through those field and get their values.
How can I do this ?
Thank you!
You can use the find(propName, value) method of FormPanel. It returns an array of all the matches. The matches will be Ext.form.WhateverField objects, depending on what types of input elements your form has, and not raw DOM elements.
var priceFields = myFormPanel.find('name', 'price[]');
The BasicForm object has a property items: it is a mixed collection. You may iterate over the collection.
ExtJS forum