I want to use tabIndex in autocomplete of MUI using inputProps={{ tabIndex: tabIndex ?? -1 }} but when I use this property , and then clicked on dropdown button page disappear can any body help me what is the problem ?
You also need to spread the params.inputProps from the Autocomplete:
<TextField
{...params}
inputProps={{ ...params.inputProps, tabIndex: 1 }}
label="freeSolo"
/>
Related
I have a MUI DateTimePicker in my react app, and I would like to disable the text input so that it is only possible to change the date/time by clicking on the icon and launching the overlays to edit them.
I have tried a few things, such as adding disabled={true} to the renderInput, like this:
renderInput={(params: any) => <TextField
{...params}
disabled={true}
InputProps={{...params.InputProps, disableUnderline: true}}
variant="standard"/>}
Doesn't quite work as expected though. I have tried a lot of other things too, but not sure how that detail would support my question.
Suggestions?
Adding readOnly to the inputProps which will be passed down to the native html input element will do the trick. This also leaves the MUI component in its "normal" visual state.
<TextField
{...params}
disabled={true}
InputProps={{...params.InputProps, disableUnderline: true}}
inputProps={{ ...params.inputProps, readOnly: true }}
variant="standard"
/>
I was able to do exactly what you're asking by just adding the disabled prop to the TextField in renderInput.
<DateTimePicker
label="Date&Time picker"
value={value}
onChange={handleChange}
renderInput={(params) => <TextField {...params} disabled />}
/>
It's possible that you are trying to set the disabled property to true when it just assumes the property being on the component means it is disabled.
I am using material-ui autocomplete ( https://mui.com/components/autocomplete/#free-solo ).
It's working fine, demo is here : https://codesandbox.io/s/0v9v9?file=/demo.tsx
by default Text input is showing autoComplete='off' but i want to change it to autoComplete='new-something' but it's not working and autoComplete='new-something' is showing as parent dev attribute instead of Input
I used this code
<TextField
{...params}
inputProps={{
...params.inputProps,
autoComplete: 'new-something',
}}
/>
But it's not working. In input it's still showing autocomplete="off" as input attribute.
As you can see in the doc https://mui.com/api/text-field/#props there is two props with the same name
inputProps: Attributes applied to the input element.
InputProps: Props applied to the Input element.
For autocomplete attribute you need inputProps
<TextField
{...params}
label="Search input"
InputProps={
...params.InputProps,
type: 'search',
}}
inputProps={{
autocomplete: 'something'
}}
/>
Here a working exanple in the codesanbox https://codesandbox.io/s/freesolo-material-demo-forked-8g2n1?file=/demo.tsx
We try to implement the autocomplete text field.
The clear and popup icon always appears from the right side (end adornment).
We have an option to work with rtl direction and we can't find a way to flip this component:
put the clear/popup icon in the start adornment.
change the direction that will set the end adornment to the left side of the field
Is anyone found a way to do this?
The clear and popup icon buttons of Autocomplete is hardcoded in endAdornment prop, there is no way to change that using the public API, but you can swap it by using this workaround:
export default function Demo() {
return (
<Autocomplete
options={top100Films.map((option) => option.title)}
renderInput={(params) => {
return (
<TextField
{...params}
InputProps={{
...params.InputProps,
startAdornment: (
<div>{params.InputProps.endAdornment.props.children}</div>
),
endAdornment: null
}}
label="freeSolo"
/>
);
}}
/>
);
}
Live Demo
I'm displaying three property values (option.primary_line, option.city, option.state, and option.zip_code) from state in the autocomplete suggestions; however, I'm trying to display only the option.primary_line value in the textarea when an option from the list is selected. I've tried setting the option.primary_line value to state and adding it as a value (tried defaultValue as well) to the textarea to no avail. What am I missing?
<Autocomplete
id="combo-box-demo"
options={addressSuggestions}
getOptionLabel={(option) =>
`${option.primary_line}, ${option.city}, ${option.state} ${option.zip_code}`
}
onInputChange={handleAddressLookup}
freeSolo={true}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
fullWidth
/>
)}
/>
You should use renderOption instead, and in getOptionLabel return the value you want to be assigned to the input
<Autocomplete
...
renderOption={(option) =>
`${option.primary_line}, ${option.city}, ${option.state} ${option.zip_code}`
}
getOptionLabel={(option) => option.primary_line}
...
/>
I am trying to use the <Autocomplete /> Material-UI component as per their documentation.
Their example shows how to disable autocomplete by using the getOptionDisabled prop function as follows:
getOptionDisabled={option => option === timeSlots[0] || option === timeSlots[2]}
Let's say that I have an array that I am dynamically generating of timeSlots that I would like to disable, timeSlotsArr, how could I use this prop to exclude all options that are present inside the timeSlotsArr array?
My current code, which is not working, looks like this:
<Autocomplete
options={timeSlots}
getOptionDisabled={option => option === timeSlotsArr.indexOf(option}
style={{ width: 300 }}
renderInput={params => (
<TextField
{...params}
label="Disabled options"
variant="outlined"
fullWidth
inputProps={{
...params.inputProps,
autoComplete: 'disabled', // disable autocomplete and autofill
}}
/>
)}
/>
Wouldn't this be enough if you want to disable all the options in the dropdown?
getOptionDisabled={option => true}
As far as I understand you only pass a function that will return a boolean, so that would do it, right?
Also, your code is not working because it is comparing one of the options in the dropdown with what indexOf returns, which is -1 if it wasn't found, the index if it was. That is never going to be true. You could change it to:
getOptionDisabled={option => !!timeSlotsArr.find(option)}
If you use indexOf, the option would the index 0 would return false too, and you wouldn't want that.
This worked for me
getOptionDisabled={(option) => !!timeSlotsArr.find(element => element === option)}