I'm trying to create a custom dropdown menu using the Material UI (MUI) Autocomplete API (found here and here). Right now, I'm trying to change the arrow icon at the end of the textbox to the ExpandMore icon also from MUI (found here). However, my code is not working. I would really appreciate any help I can get on this.
In Autocomplete API there is popupIcon prop, which is used to change icon at the end. Here is customized doc example:
import TextField from '#material-ui/core/TextField';
import ExpandMoreIcon from '#material-ui/icons/ExpandMore';
import Autocomplete from '#material-ui/lab/Autocomplete';
export default function ComboBox() {
return (
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title}
popupIcon={<ExpandMoreIcon/>}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
);
}
Related
I am new to MUI, so need a little help.
I want to use <Autocomplete freeSolo ...> that shows a dropdown arrow icon like it were a combo-box mode.
Looks like popupIcon and forcePopupIcon props are being ignored in freeSolo mode.
Thanks!
You can add your icon in renderInput prop of Autocomplete. Actually Autocomplete component is just a wrapper around Textfield component. In MUI V5, You can add any icon at the start or end of it by targeting Textfield inside it. For your case check the example below.
import Autocomplete from '#mui/material/Autocomplete'
import InputAdornment from '#mui/material/InputAdornment'
import TextField from '#mui/material/TextField'
import ArrowDropDownIcon from '#mui/icons-material/ArrowDropDown'
<Autocomplete
freeSolo
options={myOptions}
renderInput={(params) => (
<TextField
{...params}
label="My label"
InputProps={{ endAdornment: (
<InputAdornment position="end">
<ArrowDropDownIcon />
</InputAdornment>
),
}}
/>
)}
/>
I am using the Material UI x time-picker component in my app. I would like to change the clock SVG in the component to a custom SVG (a Chevron). I read that I need to use the props components. But what is the component called? I tried with the testid ClockIcon but that was not successful.
I believe what you are looking for is this:
<TimePicker
label="Time"
value={value}
onChange={handleChange}
renderInput={(params) => <TextField {...params} />}
components={{
OpenPickerIcon: SearchIcon // Replace with your icon
}}
/>
For example I have imported the SearchIcon to use it as an example to replace the default one.
As you can see in the picture, when a user types something, a dropdown opens up with given options(predefined array). Upon selecting any of the options, it converts the selected option a tag.
I want to achieve the same but I don't want to provide a list. Whatever user types should convert to tag upon pressing enter
I guess you need this. It is a free solo AutoCompelete without any list options.
I made this example in codeSandBox for you.
import * as React from "react";
import Autocomplete from "#mui/material/Autocomplete";
import TextField from "#mui/material/TextField";
export default function LimitTags() {
return (
<Autocomplete
multiple
id="tags-filled"
options={[]}
defaultValue={[top100Films[13].title]}
freeSolo
renderInput={(params) => (
<TextField
{...params}
variant="filled"
label="freeSolo"
placeholder="Favorites"
/>
)}
/>
);
}
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 following various examples from https://material-ui.com/components/autocomplete/ to create a custom autocomplete. I'm trying to use the renderInput property to use a custom input component. All of the examples I find use the TextField component, but I'd like to use a regular input component.
Problem is, the options are never displayed. I've created a demonstration here (swap renderInput with renderInputWORKING to see working version):
https://codesandbox.io/s/epic-johnson-oxy7b?file=/src/App.tsx
with the following code in renderInput:
const renderInput = (params: AutocompleteRenderInputParams) => {
console.log(params);
const { InputLabelProps, inputProps, InputProps } = params;
return (
<div>
<label {...InputLabelProps}>foo</label>
<input {...InputProps} {...inputProps} />
</div>
);
};
How can I use the <input /> component for renderInput prop on <Autocomplete />?
UPDATE
The 4.10.1 release of Material-UI (on June 1, 2020) included a new example in the documentation for this exact case: https://material-ui.com/components/autocomplete/#custom-input.
Pull request: https://github.com/mui-org/material-ui/pull/21257
The most useful example to look at in the documentation is the Customized Autocomplete example which uses InputBase instead of TextField. This example contains the following code for renderInput:
renderInput={(params) => (
<InputBase
ref={params.InputProps.ref}
inputProps={params.inputProps}
autoFocus
className={classes.inputBase}
/>
)}
The InputProps passed to TextField are placed on a div that wraps the <input>, so most of those props are not appropriate to put directly on the <input> element as you were. In the code above from the documentation example, you can see that it only uses one thing from params.InputProps which is the ref. This ref is used for controlling the anchor element for the listbox of options. A ref is also placed on the <input> itself, but that ref is used for very different purposes. With your code, only one of those refs was getting used.
Below is a working example (based on the Combo Box example since your sandbox has a lot of other customizations that aren't directly related to this question) that uses <input> instead of TextField:
import React from "react";
import Autocomplete from "#material-ui/lab/Autocomplete";
export default function ComboBox() {
return (
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={option => option.title}
style={{ width: 300 }}
renderInput={params => (
<div ref={params.InputProps.ref}>
<label {...params.InputLabelProps}>My Label </label>
<input {...params.inputProps} autoFocus />
</div>
)}
/>
);
}