I'm using React and Material-UI framework for a project and want to implement the MUI-Autocomplete Component. I do get the options displaying as they're meant to be but upon selecting one of these options the Input field goes blank and even the state remains unchanged.
I also tried the demo on the website and couldn't get it to work.
Here's the code. Take a look at output here.
Link to video showing output
<Autocomplete
id="combo-box-demo"
options={this.props.products}
getOptionLabel={option => option.name}
style={{ width: 300 }}
renderInput={params => (
<TextField
{...params}
label="Combo box"
variant="outlined"
fullWidth
/>
)}/>
I could not replicate the problem on CodeSandbox but here's the link to it.
Link to CodeSandbox
onSelectCapture={this.handleChange}
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 have a functional Mui Autocomplete that lets the user select from options or make his own input. However, the value is not stored on useState when an option is clicked, only when the input loses its focus. I have checked some tutorials and apparently I have nothing different, but theirs work as expected (selected option on selection is stored as useState value).
CodeSandbox here
<Autocomplete
key={"casa"+index}
freeSolo
autoSelect
fullWidth
value={i.casa}
onChange={e=>ponervalor(e,index)}
options={casasNamesList}
id={"casasNamesList"+index}
size="small"
color="primary"
autoComplete={false}
renderOption={(props, option) => {
return (
<span {...props} style={{ backgroundColor: "primary", border:"0.5px solid black"}}>{option}</span>);
}}
renderInput={(params) => <TextField {...params} label="Casa" name="casa" variant="outlined" />}
/>
Edit: To add information, I believe the property autoSelect has something to do with this problem of mine, as it states:
If true, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different
option or changes the character string in the input.
However, if I set it to false, the selected option is never stored as value.
Well, finally I was able to resolve it by not using onChange and use instead:
onInputChange={(e,newvalue)=>ponervalorcasa(e,newvalue,index)}
I'm having problems with material UI Autocomplete changing from single select to multiple select based on condition throws error Cannot read property 'length' of null
Here's a codesandbox demonstrating this:
https://codesandbox.io/s/material-demo-forked-q0038?file=/demo.js
Here I have created scenario to change from single to multi conditionally
I know I can use another autocomplete component if it's multi but if there any solution to do in single component it will be helpfull
You can set the key prop to ismulti:
<Autocomplete
multiple={ismulti}
id="tags-standard"
key={ismulti} // here
options={top100Films}
getOptionLabel={(option) => option.title}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
label="Multiple values"
placeholder="Favorites"
/>
)}
/>
I am trying to create an autocomplete component that a person will use to select an item from a list of items, I've done that, no issues.
The problem is thatI also want to add a button at the end of the list (like a last item in the list that is always present), so that if the item that the person is looking for is non existent the person can click that button to add a new item. This is the same question and is answered but for react-select, I cant find anything in the API of material-ui to do the same. Append a button at the end of options in react-select
An example (taken from the question above): https://i.stack.imgur.com/WRFd8.png
I tried adding an onClick to the TextField, but of course, that gets triggered as soon as someone clicks on the auto ocmplete
<Autocomplete
id="supplierIdd"
style={{ width: 300 }}
options={suppliers.map((supplier) => supplier.name)}
renderInput={(params) =>
<>
<TextField {...params} label="Булстат" margin="normal" onClick={()=>{console.log("hi")}} variant="outlined" />
</>
}
/>
I also tried adding to the options array, but of course that is an array of just options, not elements, so where would I add a or whatever element?
I found solution, You can use "filterOptions" method to add a new button at the bottom.
Check this::
<Autocomplete
id="supplierIdd"
style={{ width: 300 }}
options={suppliers.map((supplier) => supplier.name)}
renderInput={(params) =>
<>
<TextField {...params} label="Булстат" margin="normal" onClick={()=>{console.log("hi")}} variant="outlined" />
</>
}
filterOptions={(options) => {
const result = [...options]
result.push(
((
<Button
variant="outlined"
color="primary"
onMouseDown={onAddNew}
>
+ Add New
</Button>
) as unknown) as string, // typecasting required for typescript
)
return result
}}
/>
I have a problem using the Autocomplete component provided by Material UI for React.js.
Here is what my component looks like :
<Autocomplete
options={options}
value={value}
disableCloseOnSelect
onChange={handleChange}
limitTags={4}
getOptionLabel={(option) => option.name }
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
className={classes.checkbox}
checked={selected}
/>
{option.name}
</React.Fragment>
)}
renderInput={(params) => (
<TextField {...params} variant="outlined" label={label} placeholder={label} />
)}
{...custom}
/>
I can't get the feature disableCloseOnSelect to function with a controlled component, as it does not prevent the list from closing after select... If I remove the props value and onChange everything works perfectly, but I need them for my project.
Does anybody have the same problem or see anything wrong with the way I am handling things ?
There is an issue that seems to match mine here. In that case, could it be a bug ?
This is most probably caused by the mother component re-rendering. Autocomplete's state needs to be localised.
Here's a sandbox demonstration of the difference this makes:
https://codesandbox.io/s/priceless-wilson-zz59q?file=/src/App.js
It also has performance benefits.