I'm working with React Hook Forms.
<Controller
control={control}
rules={{ required: "Required" }}
error={errors.state ? true : false}
helperText={errors.state && errors.state.message}
name="state"
as={
<AutoComplete
options={stateOptions}
onChange={selectStateHandler}
label="State"
value={selectedState}
/>
}
/>
helper text is working with TextField but not with Autocomplete. TextField border color changes on error, I want same with Autocomplete.
Autocomplete render input using TextField, so you just have to do the same with text field to show error
<Autocomplete
...
renderInput={(params) => (
<TextField
error={true}
helperText="Example error"
{...params}
label="Combo box"
variant="outlined"
/>
...
)}
/>
Below is the preview codesandbox
Related
Here is my basic code to accomplish the task, but couldn't come up with any outcome
<TextField
sx={{
'&::-webkit-calendar-picker-indicator': {
display: 'none',
'-webkit-appearance': 'none',
},
}}
id="outlined-basic"
variant="outlined"
type="date"
helperText="Please select the date"
/>
Also, I did a bit research on InputProps (endAdornment) within TextField to remove the icon, but that didn't work.
You can define in the components property the icon to be null for both cases.
<TimePicker
label="Time"
value={value}
onChange={handleChange}
renderInput={(params) => <TextField {...params} />}
disableOpenPicker
/>
<DateTimePicker
label="Date&Time picker"
value={value}
onChange={handleChange}
renderInput={(params) => <TextField {...params} />}
disableOpenPicker
/>
Here is a working sandbox
I guess u r using MUIv5
(and I guess u talking about DatePicker)
In that case (as u mentioned), the icon is rendered cuz the InputProps with endAdornment is passed to the text field, if u omit that prop, there will be no icon.
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={({ InputProps, ...props }) => (
<TextField {...props} />
)}
/>
I am trying to configure a react-hook-form to work for create and update operations. I am using material ui autocomplete and textfield.
The problem I am facing is with a field that has autocomplete.
If I pass an input value, it displays it, but when the form is submitted, the required error is triggered (as if the field has not been filled in).
This is my code:
<Controller
control={control}
name="type"
render={({ field: { onChange, value }, fieldState: { error } }) => (
<Autocomplete
value={value}
onChange={(event, item) => {
onChange(item.value);
}}
id="type"
defaultValue={props.operation === 'edit' ? props.values.type : null}
options={projectTypes}
renderInput={(params) => <TextField {...params}
error={!!error}
helperText={error ? error.message : null}
label="type"
{...register('type')}
/>}
/>
)}
rules={{ required: 'Project type is required' }}
/>
I have tried to add the input value as "inputValue", but then my options, are not available and I cannot either clear the value from the field.
Any ideas on what is wrong here?
The problem is you're using both <Controller /> and register to register your field.
You should only use one of them, in your use case you should use <Controller /> and get rid of the register call inside your <TextField />.
You should also pass the defaultValue for your field to <Controller /> instead of passing it to <Autocomplete />.
<Controller
control={control}
name="type"
defaultValue={props.operation === 'edit' ? props.values.type : null}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<Autocomplete
value={value}
onChange={(event, item) => {
onChange(item.value);
}}
id="type"
options={projectTypes}
renderInput={(params) => (
<TextField
{...params}
error={!!error}
helperText={error ? error.message : null}
label="type"
/>
)}
/>
)}
rules={{ required: 'Project type is required' }}
/>
How can I set the placeholder text of the MUI DatePicker. The text that is displayed when deleting the text in the input field. I want to set the text to "tt.mm.jjjj" and I always the following error message:
Format string contains an unescaped latin alphabet character `j`
Sandbox
<DatePicker
inputFormat="tt.mm.jjjj"
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField placeholder="tt.mm.jjjj" {...params} />}
/>
This is how you reset the placeholder of the TextField inside the DatePicker. The reason it doesn't work is because it is overridden by the params.inputProps provided by the DatePicker itself based on the inputFormat:
<DatePicker
{...}
inputFormat="tt.mm.yyyy"
renderInput={(params) => {
console.log(params);
return (
<TextField
{...params}
inputProps={{
...params.inputProps,
placeholder: "tt.mm.jjjj"
}}
/>
);
}}
/>
I am using Material UI's country select (https://material-ui.com/components/autocomplete/#country-select). I have an ongoing issue that when the user clicks into the input, the browser autocomplete pop up blocks the view of country options. I've tried my best to turn autocomplete to off but with no joy. Can anyone advise a possible workaround?
Have tried the 3 commonly suggested fixes:
autoComplete="off"
autoComplete="no"
autoComplete="new-password"
return (
<Autocomplete
id="country-select"
options={options}
classes={{
option: classes.option,
}}
autoHighlight
getOptionLabel={(option) => option.label}
onChange={(e, value) => setFieldValue(field.name, value.label)}
onOpen={field.onBlur}
renderOption={(option) => (
<React.Fragment>
<span>{countryToFlag(option.code)}</span>
{option.label}
</React.Fragment>
)}
renderInput={(params) => (
<TextField
{...params}
label={props.label}
name={props.name}
placeholder={props.placeholder}
variant="outlined"
helperText={_renderErrorText()}
error={hasError}
autoComplete="off"
/>
)}
/>
);
this work for me
autoComplete="chrome-off"
AutoComplete should be on rendered Input by material-ui, not the TextField wrapper. So you should do something like that:
<TextField
{...params}
label={props.label}
name={props.name}
placeholder={props.placeholder}
variant="outlined"
helperText={_renderErrorText()}
error={hasError}
inputProps={{
autoComplete: 'new-password',
}}
/>
I have a react hook forms that contains Autocomplete material UI controls.
<Controller
as={
<Autocomplete
data-cy="profileCountry"
options={countries}
getOptionLabel={option => option.name}
renderInput={params => (
<TextField
{...params}
label="* Country"
placeholder="Select a Country"
InputLabelProps={{
shrink: true
}}
variant="outlined"
/>
)}
/>
}
rules={{ required: true }}
onChange={([, data]) => data}
defaultValue={{ id: 0, name: "" }}
getOptionSelected={(option, value) => option.id === value.id}
name="country"
id="country"
control={control}
/>
I want to run a cypress test case to fill up the form and submit. How can I select like the first option in this component using cypress.
Currently I just tried my luck like the following.
cy.get("[data-cy=profileCountry]").select("Germany");
I used this and it works:
cy.get('.MuiAutocomplete-popper li[data-option-index="0"]').click();
Add a custom command:
Cypress.Commands.add('getDropdownOptions', () => {
return cy.get('.MuiAutocomplete-popper [role="listbox"] [role="option"]', {
timeout: 10000,
});
});
Then you can simply...
cy.getDropdownOptions().contains('Germany').click();
cy.get("#combo-box").click();
cy.get("li[data-option-index="0"]").contains("ntest_user").then((option)=>
{
option[0].click();
})
You need the follwing:
cy.wait(2000) // waiting for ajax to complete (till the request is resolved)
cy.get('#The MUI ID').click({force:true}).focused().type('Germany');
cy.contains('Germany').click({force:true});
Assuming we give an id to the autocomplete such as
id="pool-leg-autoComplete"
freeSolo
options={legOptions.map((option) => option.title)}
onChange={updateNewLegItemText}
renderInput={(params: any) => (
<TextField
{...params}
label="Add a leg to the pool"
margin="normal"
autoFocus
variant="outlined"
value={newLegItemText}
/>
cy.get('#pool-leg-autoComplete-option-0').click();
Where the index of the item is 0 in this case.