I have the below input field below set up with Autocomplete here:
https://material-ui.com/demos/autocomplete/
(first react-autosuggest example)
So when you type 002 these options come up. Though the problem is when you click on one of the options, I get undefined error. Below are settings for the Textfield I have on the page:
value: AccountNumber,
onChange: this.updateAccountNumber,
onBlur: this.updateAccountNumber,
So somehow when you click, value for this field ends up being undefined
i have a working Autosuggest CodeSandbox set up here with console.logs I added for testing here:https://codesandbox.io/s/m35z5l98ox
As you see as you type it prints one letter less (possibly consolelog kicks in before state update) which is fine but when you select an item from the list, it doesn't trigger an onChange event (which it should since value in the field is changing)... So if you click the field, you will get the full value you selected from the list ( which I don't quite know how that list value gets pasted into the field)...
To clarify: This Account Number field is set up with Redux, so what you type gets saved thru onChange to Redux Store. Once the suggestions gets displayed and you select one from the list, at that moment, value of the input field gets to be undefined and autosuggest fails to put what you clicked on, in the suggest list to inside the field.
I am thinking suggestions is wiping out the field to write down the value I clicked on into the field and failing to do that job, but can't figure why it's failing and how to fix it...
Related
I am implementing a form in react using react hook form, The form has two select fields country and states.
Second field changes the option based on the selection in first field.
Please see the below sandbox for more details
Creating/submitting the record works perfectly fine.
The problem is: In edit, when I pre populate the values in the form using setValue(), it does not set the second dropdown(state select in the sandbox below) values on the UI but it shows that it has set the value to the field(see in the console for field state).
[CodeSandBox] https://codesandbox.io/s/angry-murdock-h0lbsp?file=/src/App.js
Steps to reproduce:
Open this sandbox in the browser.
Click on the SET ALL VALUES button.
See the blank value in states select
Also, Whats the best way to populate a form like this, i.e. in defaultsValues or useEffect?
What am I missing here, so putting it for the experts here.
Thanks for your time.
The problem you are having is about setValue. This function does not trigger a re-render in most cases. You can use reset instead.
https://react-hook-form.com/api/useform/reset
Also, if you'd like to fill the form without any user interaction, use reset in useEffect with proper dependencies.
Lastly, If you'd like to have just them having initial values instead of being undefined, set defaultValues. It is also recommended in official documents:
Important: You should provide a proper default value and avoid undefined.
undefined is reserved for fallback from inline
defaultValue/defaultChecked to hook level defaultValues. undefined value is conflicting with controlled component as default state
https://react-hook-form.com/api/useform
I'm using the React Switch component straight from this website: http://react-materialize.github.io/react-materialize/?path=/story/components-switch--switch. I put this into my SideNav like so:
<Switch
id="Switch-11"
offLabel="Off"
onChange={(e) => exampleFunction(e)}
onLabel="On"
/>
I did it so that when the switch is clicked, it would call "exampleFunction()" which contains this:
const exampleFunction = (e) => {
console.log(e.target.value)
}
The problem is that when I look at the console for the value of the switch, it is always "on," even if I press it multiple times. I'm a little lost as to why this happens. Any advice would be appreciated. Thanks.
If you want to know whether the checkbox is checked, you need to use e.target.checked, looking at the source code from materialize, we can see the onChange is passed directly to the input element, so you need to use the checked attribute of the input element.
The value attribute has the following definition:
The value property sets or returns the value of the value attribute of a checkbox.
For checkboxes, the contents of the value property do not appear in the user interface. The value property only has meaning when submitting a form. If a checkbox is in checked state when the form is submitted, the name of the checkbox is sent along with the value of the value property (if the checkbox is not checked, no information is sent).
From: https://www.w3schools.com/jsref/prop_checkbox_value.asp
By default with AntD forms when tabbing through fields and coming across a Select field, the user inputted value doesn't stay when tabbing to the next field. How do I fix that? I've been trying various ways of using onBlur to set the Select field when the user tabs out of it but can't get it to work.
I created a simple codesandbox here to illustrate my problem.
CodeSandBox Example
For example to reproduce what i'm referring to..
input something into the first input field and then hit tab to move focus to the second input field (the select dropdown).
input one of the options using the keyboard such as "A".
Tab to the third field. Note the second field (the Select dropdown) doesn't stay populated with the inputted value. The only way to get it to stay is to use your mouse to select it. Which isn't a good user experience.
It's the normal behavior of antd. It doesn't stay because the Select has no value and even you type the exact value and hit the tab it will not stay because it has no value, you need to select in options list in order the input to stay. The purpose of the search is to select an option quickly, not setting the value on the Select
One solution is to make the Select to be a controlled component, meaning the value will be based on state value:
this.state = {
...
second: undefined,
}
onSearch = (value) => {
if (value.trim()) {
this.setState(() => ({ second: value.toUpperCase() }));
}
};
<Select
value={this.state.second}
onSearch={this.onSearch}
>
Beware that this is not the better approach, the user can type anything to it even the input was not on the option list. I suggest to look on antd component called Autocomplete. You can achieve the same goal but a good choice if you allow the user to type in to it even the input is not in the option list.
https://codesandbox.io/s/friendly-bohr-mjyhc
This is the code snippet of my form, I have created a field and I want to change its value onChange. I don't see the value changing on the screen and when I console log the event.target.value I only see the current letter being replaced from the previous letter (if I type AB, the console log values show A and then it replaces to B)
Formik library itself provides various method to handle the complexity.
In your code rather than adding a custom handle Change you can directly use handleChange method.
Simply replace -
onChange={customChange}
with
onChange={handleChange}
to make this work.
FYI - I also printed values so that you can see the formik bag of values.
Here is the working code -
Code Sandbox
EDIT 1 -
If you want to update the value from a custom handler then you can use setFieldValue for setting the field value.
Working Code - CodeSandBox 1
I'm trying to implement this example that obtains the user selected value, but using the async select version.
I want to obtain the value that the user selected, but going through the docs on react-select this isn't clear how to do. If you set state equal to the inputValue, as soon as you click on the 'submit' button the inputValue is cleared. You get back
" "
instead of
user selected value
I'm not sure how to obtain the user selected value using the async select component. I have my API data successfully populating & filtering the suggestions box, but I can't figure out how to get the selected value.
I've tried numerous methods and lastly tried using the refs approach like in the above link, but the stored value shows up as null. Instead of storing the user selected value. Here is the link to my broken codesandbox.
Can anyone help or point me in the right direction?
Edit
Here is a link to a working demo if anyone gets stuck on this in the future.
So, what you got wrong is props of react-select to get value on on-change. Use onChange instead of onInputChange on your AsyncSelect Component. Both props are for different purpose. Here is a doc for all props available for react-select. https://react-select.com/props
Try code below
textChange = inputValue => { // whole object of selected option
this.setState({ inputValue:inputValue.value });
};
render(){
....
<AsyncSelect
defaultOptions
loadOptions={this.promiseOptions}
onChange={this.textChange} /** onChange triggers only when user change the
options but onInputChange triggers on each change which is for different
purpose like for e.g. when user type, fetch similar options **/
name="options"
/>
}