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>
),
}}
/>
)}
/>
Related
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.
I want to implement a DateRangePicker from Material UI with a calendar icon, e.g. it should look like that:
According to the Api documentation it should work with
components={{
OpenPickerIcon: CalendarTodayIcon
}}
but it doesn't. See codesandbock.
I also tried it by adding an Icon manually to the TextField which shows an Icon but doesn't open the PopupMenu when clicking on the Icon.
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton>
<CalendarTodayIcon />
</IconButton>
</InputAdornment>
)
}}
Anyone an idea how to implement that? I am using mui 5.1.0 and mui/lab 5.0.0-alpha.50
I haven't used the Component from the library but you're right according to the documentation
components={{
OpenPickerIcon: CalendarTodayIcon
}}
Should work but it doesn't.
In your workaround, you're not supplying anything on the IconButton onClick event handler so naturally, the icon does nothing when clicked.
What you need to do is focus on the input whenever the Icon is clicked. You can achieve that by using the useRef hook in your input and then calling the current.focus() method inside the onClick handler of the IconButton.
const startInputRef = React.useRef();
<TextField
inputRef={startInputRef}
{...startProps}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
onClick={() => {
startInputRef.current.focus();
}}
>
<CalendarTodayIcon />
</IconButton>
</InputAdornment>
)
}}
/>
See codesandbox for a working example.
I still think this is a hacky workaround though so I'd suggest opening an issue on the library's github repo to get instructions.
I'm trying to test a component that has an endAdornment IconButton and other with a TreeView, but neither the IconButton and the ExpandIcon/CollapseIcon have good options to dispatch test events.
This is the TextField component that I'm using:
<TextField
fullWidth
label="Label"
onChange={handleChange}
type="text"
InputProps={{
endAdornment: (
<InputAdornment >
<IconButton onClick={openAssetHierarchy}>
<Folder />
</IconButton>
</InputAdornment>
),
}}
/>
This is the TreeView component:
<TreeView
defaultCollapseIcon={<ArrowDropDown />}
defaultExpandIcon={<ArrowRight />}
defaultEndIcon={<div style={{ width: 24 }} />}
onNodeToggle={handleToggle}
onNodeSelect={handleSelect}
>
[...]
</TreeView>
For the TextField icon button:
For TreeView when using Testing Playground to get the icon
There aren't good queries to get the icons for tests. How can I get these options?
For the IconButton you can add an aria-label attribute to the element, then use getByLabelText to access it in your test. This is also useful and recommended for accessibility purposes.
<IconButton aria-label="add a file" onClick={openAssetHierarchy}>
<Folder />
</IconButton>
screen.getByLabelText('add a file') // Gets you the `IconButton`
For the TreeView items, I assume you don't actually need to access the icon specifically but simply need to access the TreeItem for testing purposes. This can be done with getByRole and passing the tree item's name.
screen.getByRole('treeitem', { name: /Test1/ }) // Gets you the first `TreeItem`
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" />}
/>
);
}
I want to achieve the below UI for TextInput. It should have a fixed text at end along with a placeholder where the input can be given.
Note: the Fixed text shouldn't be editable.
Docs on input adornments: https://material-ui.com/components/text-fields/#input-adornments
import { TextField, InputAdornment } from "#material-ui/core";
<TextField
placeholder="00"
InputProps={{
endAdornment: <InputAdornment position="end">km</InputAdornment>,
}}
/>