I am trying to get the date of the date in a custom function in the onChange function.
The problem is that the function handleDatesChanged(), gets the previous date not the updated one.
<DesktopDatePicker
inputVariant="outlined"
id="date-picker-dialog"
label="Return date"
disabled={queryParameterUsed ? true : false}
fullWidth
name="endDate"
onChange={(val) => {
formik.setFieldValue("endDate", val);
handleDatesChanged(); //the function that I fetch data based on the date updated
}}
renderInput={(params) => <TextField {...params} />}
onBlur={formik.handleBlur}
value={formik.values.endDate}
inputFormat="dd/MM/yyyy"
/>
const handleDatesChanged = () => {
console.log(formik.values.endDate); //Prints 24/08/2022 (previous date) When in fact it should supposed to print to 28/08/2022
}
The setFieldValue uses useReducer under the hood. It is async and new value is not available immediately. The same applies to the useState hook. You can pass new value as parameter of handler:
onChange={(val) => {
formik.setFieldValue("endDate", val);
handleDatesChanged(val);
}
const handleDatesChanged = (val) => {
console.log(val);
}
Related
I want the ability for users not to select a date.
<LocalizationProvider dateAdapter={AdapterDateFns}>
<MobileDatePicker
label={"Date From"}
inputFormat="dd/MM/yyyy"
disablePast={true}
value={datefrom}
minDate={new Date()}
onChange={(newValue) => {
setDateFrom(format(newValue, 'MM/dd/yyyy'));
if (dateto == '') {
setDateTo(format(newValue, 'MM/dd/yyyy'));
}
}}
renderInput={(params) => <TextField variant="outlined" {...params} helperText={null} fullWidth />}
/>
I thought this would work:
<Button onClick={(newValue) => {setDateFrom(null);}}>CLEAR DATES</Button>
And while it clears the date, it does not allow me to save a blank field
If you only want to ignore undefined value for this case, you can conditionally spread object.
Something like this should work.
await setDoc(docRef, {
mandatoryField: "value",
...(dateTo === "" ? {} : {timeStamp: dateTo} )
})
If you want to ignore all undefined value for future usage you can initialize firestore setting as below.
import { getFirestore, initializeFirestore } from 'firebase/firestore'; // Firebase v9+
// Must be called before getFirestore()
initializeFirestore(app, {
ignoreUndefinedProperties: true
});
const firestore = getFirestore(app);
I want to make a get request 2 seconds after the key is pressed on onChange. I'm using useForm and I know it can be done via lodash.throttle but it's not necessary for me. Help me write a function please
this is my get request
const response = await searchContractorsById(data.INN);
<Controller
name="inn"
control={control}
render={({ field: { value, onChange } }) => (
<TextField
value={value}
onChange={onChange}
type="number"
fullWidth
size="small"
placeholder="Например, 6163152794"
error={!!errors?.inn}
helperText={errors?.inn && errors.inn?.message}
/>
)}
/>
In case you wish to do this request at every onChange, you can do something like this:
const handleChange = (event, onChange) => {
setTimeout(() => {
searchContractorsById(data.INN)
.then(() => {...use results here})
.catch(e => ...)
}, 2000)
onChange(event)
}
<Controller
name="inn"
control={control}
render={({ field: { value, onChange } }) => (
<TextField
value={value}
onChange={(e) => handleChange(e, onChange)}
type="number"
fullWidth
size="small"
placeholder="Например, 6163152794"
error={!!errors?.inn}
helperText={errors?.inn && errors.inn?.message}
/>
)}
/>
I use the autocomplete field of material-ui (v5) and formik to generate my forms.
On this form, I have some lists defined as constants.
I use an api to get the default value of this list.
This api returns only the "code" of the option but not its label.
<Formik
enableReinitialize
initialValues={initialFormValues}
validationSchema={Yup.object().shape({
[...]
<Autocomplete
error={Boolean(touched.civility && errors.civility)}
helperText={touched.civility && errors.civility}
label="Civility"
margin="normal"
name="civility"
onBlur={handleBlur}
onChange={(e, value) => setFieldValue('civility', value)}
options={civilities}
value={values.civility}
getOptionLabel={(option) =>
option.name ? option.name : ''
}
isOptionEqualToValue={(option, value) => option.code === value}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
label={<Trans>Civility</Trans>}
/>
)}
/>
My parameter isOptionEqualToValue is good because even if the value is not displayed in the input, it is well selected in the list.
You can see that the input text field is empty:
But if I unroll the list, I can see that my "ms" value has been selected:
What should I do to make the input text contain the default value?
After cloned your snippet code above, the problem was in getOptionLabel, the option argument is a string value, so it hasn't a name property and appears empty string. Here is an online example codesandbox.
import { useState } from "react";
import { Formik, Form } from "formik";
import Autocomplete from "#material-ui/lab/Autocomplete";
import TextField from "#material-ui/core/TextField";
export default function App() {
const civilities = ["Mr", "Ms", "Other"];
const [values, setValues] = useState({
civility: "Ms"
});
const handleBlur = (e) => {
console.log("Blur:", e.target.value);
};
const setFieldValue = (type, value) => {
setValues((oldValues) => ({ ...oldValues, [type]: value }));
};
return (
<Formik err>
{({ errors, touched }) => (
<Form>
<Autocomplete
error={Boolean(touched.civility && errors.civility)}
helperText={touched.civility && errors.civility}
label="Civility"
margin="normal"
name="civility"
onBlur={handleBlur}
onChange={(e, value) => setFieldValue("civility", value)}
options={civilities}
value={values.civility}
isOptionEqualToValue={(option, value) => option.code === value}
renderInput={(params) => (
<TextField {...params} variant="outlined" label="Civility" />
)}
/>
</Form>
)}
</Formik>
);
}
So I have an async combo box that pulls options from an API. The options are just an Id and a description. This component is part of a form that I'm showing to add or edit data. What I'd like to see happen is have the option be empty when adding new data and to have the current value selected when editing. Instead, it simply shows the label.
This is my code that's almost a copypaste of the example from the docs.
export default function AsyncAutoComplete(props:AsyncAutoCompleteProps) {
const [open, setOpen] = React.useState(false);
const [options, setOptions] = React.useState<EntityWithIdAndDescription[]>([]);
const loading = open && options.length === 0;
React.useEffect(() => {
let active = true;
if (!loading) {
return undefined;
}
(async () => {
props.populateWith().then((options)=> {
if (active) {
setOptions(options);
}})
})();
return () => {
active = false;
};
}, [loading]);
React.useEffect(() => {
if (!open) {
setOptions([]);
}
}, [open]);
return (
<Autocomplete
id="async-autocomplete"
open={open}
onOpen={() => {
setOpen(true);
}}
onClose={() => {
setOpen(false);
}}
onChange={props.onChange}
getOptionSelected={(option, value) => option.id === value.id}
getOptionLabel={(option) => option.description}
options={options}
loading={loading}
renderInput={(params) => (
<TextField
{...params}
label={props.label}
variant="outlined"
margin="dense"
InputProps={{
...params.InputProps,
endAdornment: (
<React.Fragment>
{loading ? <CircularProgress color="inherit" size={20} /> : null}
{params.InputProps.endAdornment}
</React.Fragment>
),
}}
/>
)}
/>
);
What I want is to pass an Id value to this component and have it show the description for that value as the selected option (after making the API call). Using defaultValue doesn't seem to work.
Any advice with either modifying this or taking a different approach would be helpful.
Looks like what you're after is a controlled component. There's an example of this in Material UI's Autocomplete demo under Playground called controlled.
I'm not sure how you're getting the id of the initial value you want to pass to the component to show that it's selected. It could be something like the following.
Create a separate state for the value you select from this Autocomplete in your parent component. In fact, I would not have a separate component called AsyncAutocomplete at all. This is so you control all your state in the parent component and the Autocomplete component becomes purely presentational.
After your API call is complete and the setOptions(options) is called, call setValue with the value that you would like to show selected. This must be of type EntityWithIdAndDescription.
Create an inline-function for the onChange prop of the Autocomplete component which takes a the second parameter as the EntityWithIdAndDescription | null type. This is what's required from Autocomplete's onChange. Call setValue with this parameter as the argument.
Pass options, value, onChange and loading as props into the Autocomplete component. The additional props I've passed over and above what you've done in your code are:
<Autocomplete
...
disabled={loading}
value={value}
...
/>
Let me know how you go
const [value, setValue] = useState<EntityWithIdAndDescription | null>(null); // (1)
const [options, setOptions] = useState<EntityWithIdAndDescription[]>([]);
const loading = options.length === 0;
useEffect(() => {
populateWith().then((options)=> {
setOptions(options);
})
// (2)
setValue({
id: "something",
description: "something",
})
return () => {};
}, []);
// (4)
<Autocomplete
id="async-autocomplete"
disabled={loading}
onChange={(event: any, newValue: EntityWithIdAndDescription | null) => {
setValue(newValue); // (3)
}}
getOptionSelected={(option, value) => option.id === value.id}
getOptionLabel={(option) => option.description}
options={options}
loading={loading}
value={value}
renderInput={(params) => (
<TextField
{...params}
label={"My Entities"}
variant="outlined"
margin="dense"
InputProps={{
...params.InputProps,
endAdornment: (
<React.Fragment>
{loading ? <CircularProgress color="inherit" size={20} /> : null}
{params.InputProps.endAdornment}
</React.Fragment>
),
}}
/>
)}
/>
);
Code Sandbox
Here's an example with the Autocomplete in a separate component I called MyAutocomplete. It includes an API call and setting a value I want to be selected first.
https://codesandbox.io/s/autumn-silence-lkjrf
Can you tell me that why I'm getting error "A component is changing an uncontrolled Autocomplete to be controlled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled Autocomplete element for the lifetime of the component."
component :
function AutoComplete(props) {
const defaultProps = {
options: props.options,
getOptionLabel: option => option.name,
};
const handleChange = (e, value) => {
props.onChange(value);
};
return (
<Autocomplete
{...defaultProps}
renderInput={params => (
<TextField {...params} label={props.label} margin="normal" />
)}
onChange={handleChange}
value={props.value}
/>
);
}
calling autocomplte:
<Controller
control={control}
name = 'country'
as = {
<AutoComplete
options={countryOptions}
onChange={selectCountryHandler}
label="Country"
value={selectedCountry || ''}
/>
} />
how can I solve this error?
You ensured that the value property never had been undefined, but you had to do same for inputValue.
the "value" state with the value/onChange props combination. This state represents the value selected by the user, for instance when pressing Enter.
the "input value" state with the inputValue/onInputChange props combination. This state represents the value displayed in the textbox.
⚠️ These two state are isolated, they should be controlled independently.
Component becomes uncontrolled when inputValue property is undefined, and vice versa.
If in the following example you delete an empty string from
React.useState('') you'll get the same error message because inputValue during first render is undefined.
import React from 'react'
import TextField from '#material-ui/core/TextField'
import Autocomplete from '#material-ui/lab/Autocomplete'
const options = ['Option 1', 'Option 2']
export default function AutocompleteLab() {
const [value, setValue] = React.useState(options[0])
const [inputValue, setInputValue] = React.useState('')
return (
<div>
<div>{`value: ${value !== null ? `'${value}'` : 'null'}`}</div>
<div>{`inputValue: '${inputValue}'`}</div>
<br />
<Autocomplete
value={value}
onChange={(_, newValue) => {
setValue(newValue)
}}
inputValue={inputValue}
onInputChange={(_, newInputValue) => {
setInputValue(newInputValue)
}}
options={options}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Name" variant="outlined" />}
/>
</div>
)
}
When no value is selected, you need to add || null to prevent the Autocomplete going into uncontrolled mode:
<Autocomplete {...props} value={props.value || null} />
If you pass value={undefined} to the Autocomplete component, it will start in "uncontrolled" mode, meaning it keeps its own internal state. Then if you later supply a value it raises the "A component is changing" error. But if you pass value={null}instead of value={undefined} that causes the Autocomplete to start in controlled mode. The Autocomplete will assume you will be providing the state, not keep its own, and the error goes away.
I solved this by removing the default value.
<Autocomplete
multiple
id="multiple-limit-tags"
options={(option) => option.label}
getOptionLabel={(option) => option}
// defaultValue={options || []}
renderInput={(params) => <TextField {...params} label="My Label" />}
/>
It wasn't obvious how to solve this, and the documentation doesn't help much either. I find it curious that a copy-pasted example from the documentation results in this error. I guess the example works because the choices are hard-coded.
Previous answer was absolutely correct, BUT I spend 20 minutes while I figure out that inputValue it should be value
So working example from me:
export default function AddModal(): ReactElement {
const [resource, setResource] = useState('one');
<Autocomplete
id="autocomplete"
options={['one', 'two']}
defaultValue={resource}
value={resource}
PopperComponent={StyledPopper}
onChange={(event, newInputValue) => setResource(newInputValue)}
renderInput={(params) => <TextField {...params} />}
/>
I had the same issue today, but I was able to solve it by providing a default value of null as well as providing a null value in case of it not existing. I'll leave the code that worked for me:
<Autocomplete
value={filters.tag || null}
defaultValue={null}
options={tags || []}
getOptionLabel={(option) => option}
renderInput={(params) => (
<TextField {...params} label="Search" variant='outlined' size='small' />
)}
fullWidth
onChange={(event, value) => {
if (value) {
setFilters({ ...filters, tag: value });
} else {
setFilters({ ...filters, tag: '' });
}
}}
/>
For me I fixed this issue by updated the onChange function and add || null rather then removing the default value since I still need it here is the code
<Box mt={2}>
<Controller
control={control}
name="thematic"
rules={{
required: 'Veuillez choisir une réponse',
}}
render={({ field: { onChange } }) => (
<Autocomplete
defaultValue={
questionData?.thematic ? questionData?.thematic : null
}
options={thematics}
getOptionLabel={(option) => option.name}
onChange={(event, values) => {
onChange(values || null)
}}
renderInput={(params) => (
<TextField
{...params}
label="Thématique"
placeholder="Thématique"
helperText={errors.thematic?.message}
error={!!errors.thematic}
/>
)}
/>
)}
/>
</Box>
For the autocomplete with options which is a simple array without object you can simply do it that way and u want get any issue
<Box mt={2}>
<Controller
control={control}
name="type"
rules={{
required: 'Veuillez choisir une réponse',
}}
render={({ field: { onChange, value } }) => (
<Autocomplete
freeSolo
options={['Champ', 'Sélection', 'Choix multiple']}
onChange={(event, values) => onChange(values)}
value={value}
renderInput={(params) => (
<TextField
{...params}
label="Type de la question"
variant="outlined"
onChange={onChange}
helperText={errors.type?.message}
error={!!errors.type}
/>
)}
/>
)}
/>
</Box>
the default value you can set it within useForm if you are using react-hook-form
const {
handleSubmit,
control,
watch,
register,
formState: { errors },
} = useForm({
defaultValues: {
...
type: questionData?.type ? mapperQuestionType[questionData?.type] : '',
},
})