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.
Related
enter image description hereI have a selector textfield in which I want to change the icon, but in the standard way it doesn't work as expected.
on the top selector, the icon is not replaced, but is located above the standard arrow. And the selection event does not work if you click on it
on the selector at the bottom standard
<TextField
select
InputProps={{
disableUnderline: true,
endAdornment: (
<InputAdornment
position="end"
disablePointerEvents
>
<IconButton
aria-label="pick a date"
>
<img width="16px" src={testIcon} alt="calendar" />
</IconButton>
</InputAdornment>
),
}}[enter image description here](https://i.stack.imgur.com/aib0C.png)
>
I tried different options for connecting the icon, the result is the same everywhere
I got a basic input component in React and want to be able to add an Material UI - Icon either on the left or on the right side inside of the input field.
What is the best practice for doing this?
Appreciate any help.
You probaly looking for "input adornments"
https://mui.com/material-ui/react-text-field/#input-adornments
<TextField
{...textFieldProps}
onClick={() => {}}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<YourCustomIcon />
</InputAdornment>
),
}}
/>
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 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 am using IconMenu with IconButton and Icon.
I want to have a label just before 'NavigationExpandMoreIcon'.
Is it possible to achieve in this possible setup or do I need to change the components that I am using?
My Code looks like:
<IconMenu
iconButtonElement={
<IconButton touch>
<NavigationExpandMoreIcon />
</IconButton>
}
onItemClick={this.handleClick}
>
{options}
</IconMenu>
I am using material UI 0.20 and React 16
I also have material ui 3.7 (So I can upgrade the component, if needed)
I think you can customize using iconButtonElement options it is accept node..
<IconMenu
iconButtonElement={
<React.Fragment>
//Use styles based on your need for label component...
<label>Your Label here</label>
<IconButton touch>
<NavigationExpandMoreIcon />
</IconButton>
</React.Fragement>
}
onItemClick={this.handleClick}
>
{options}
</IconMenu>