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.
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 a Mui Textfield with the goal of having custom formats that I can pass into a prop. My issue is how can I pass custom formats. I have seen an onlinesandbox:
that implements NumberFormat inside a Mui TextField. But how do I pass in the format like this:
<div className="App">
<TextField
label="react-number-format"
value={values.toFixed(2)}
onChange={handleChange}
name="numberformat"
id="formatted-numberformat-input"
InputProps={{
inputComponent: NumberFormatCustom(format : '##-##-##')
}}
/>
</div>
You can pass format parameter inside inputProps of TextField like this:
<TextField
label="react-number-format"
value={values.toFixed(2)}
onChange={handleChange}
name="numberformat"
id="formatted-numberformat-input"
inputProps={{ format: "##-##-##" }}
InputProps={{
inputComponent: NumberFormatCustom
}}
/>
You can take a look at this sandbox for a live working example of this usage.
I'm working on migrating material-ui v4 to MUI v5 and I was using material-ui-pickers along with it.
I read the migration guide: https://mui.com/guides/pickers-migration/ and the docs, but I can't find and equivalent for the emptyLabel feature in: https://material-ui-pickers.dev/api/KeyboardDatePicker
emptyLabel on material-ui-pickers allowed you to set a custom text, that showed up when the value on the picker was set to null.
Is this a missing feature in MUI's date picker or am I missing something?
KeyboardDatePicker is no longer maintained and is now part of the lab components in MUI v5 as DatePicker (as explained in migration guide).
Actually there's no "emptyLabel" prop for DatePicker but you can achieve the same effect using the label prop and a check on your value provided to DatePicker:
<DatePicker
label={value === null ? "null value!" : "placeholder"}
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
see example here
Wouldn't using placeholder cover your desired use case?
<DatePicker
...
renderInput={(params) => (
<TextField
{...params}
inputProps={{
...params.inputProps,
placeholder: "Place for extra info"
}}
/>
)}
/>
Here is a live codesandbox example.
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>
)}
/>
);
}
I'm trying to hook up Material UI TextField with an input component of my own. The code utilizing the TextField looks like this:
<Autocomplete
id="inputData"
options={inputData}
getOptionLabel={option => option.text}
renderInput={params => (
<TextField
{...params}
label="inputData"
InputProps={{
inputComponent: () => <Input name="inputData" />
}}
/>
)}
/>
and the Input component code is simple:
const Input = () => <input />
It will become more complicated but for now I'd like to get this simple code to work. The error I get is that inputRef.current is null which is probably caused by the lack of InputElement interface implementation in the Input component. Please see the Material UI docs below the code snippet for the info on InputElement interface. In other words my Input component doesn't handle the inputRef prop Material UI needs.
How do I properly integrate a custom Input component with Material UI TextField ?
Here's a Sandbox: https://codesandbox.io/s/fervent-bash-pxqq0.