In my reactJS app, I've setted up some datepicker and everything works good.
In a custom page, i have another datepicker and i see a strange red border around it:
The code is:
<DatePicker
disableFuture
style={{ width: "90%", border: "1px solid black" }}
inputFormat="yyyy-MM-dd"
renderInput={(params) => <TextField fullWidth {...params} />}
value={props.value}
fullWidth
onMouseDown={(e) => e.stopPropagation()}
onChange={(e) =>
props.handleChangeComponentValue(props.id, e.target.value)
}
onBlur={(e) => props.handleBlurComponent(props.id, e.target.value)}
/>
inspecting it with chrome i see that the style comes from
<fieldset aria-hidden="true" class="sc-gKseQn jzeLFY MuiOutlinedInput-notchedOutline-SmBCs dwFpjw MuiOutlinedInput-notchedOutline">
<legend class="sc-iBPTik gOBiIn">
<span class="notranslate">​</span>
</legend>
</fieldset>
in particular:
.hiztcv.Mui-error .MuiOutlinedInput-notchedOutline {
border-color: #f44336;
}
I'm not setting any class of it, and that color is not set in my project.
Did i miss something?
I also faced the same issue. When I console.log params coming to the renderInput property, I saw that it has the default property of error:true.
So you can fix it like this:
<DatePicker
...
renderInput={(params) => <TextField {...params} error={false} />}
...
/>
Related
I'm using the React MUI Autocomplete component like in the countries example from the official doc.
My goal is to display in bold the country code, as I already did in the renderOption by simply enclosing the option.code value with HTML tags.
import * as React from 'react';
import Box from '#mui/material/Box';
import TextField from '#mui/material/TextField';
import Autocomplete from '#mui/material/Autocomplete';
export default function CountrySelect() {
return (
<Autocomplete
id="country-select-demo"
sx={{ width: 300 }}
options={countries}
autoHighlight
getOptionLabel={(option) => `${option.code} ${option.label}`} // DISPLAY THE CODE
renderOption={(props, option) => (
<Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
<img
loading="lazy"
width="20"
src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
alt=""
/>
{option.label} (<b>{option.code}</b>) +{option.phone}
</Box>
)}
renderInput={(params) => (
<TextField
{...params}
label="Choose a country"
inputProps={{
...params.inputProps,
autoComplete: 'new-password', // disable autocomplete and autofill
}}
/>
)}
/>
);
}
I cannot find a way to reference the option.code inside the renderInput property, so I cannot figure out how to display the country code in bold also in the renderInput, since the bold is only visible when choosing an option, but not when that option is selected.
Is there a solution for this?
The main problem with this is that MUI Textfields consist of HTML <input/> tags.
Its value can only be of type string which prohibits any direct value styling but you can make use of an startAdornment like so:
...
renderInput={(params) => (
<TextField
{...params}
label="Choose a country"
inputProps={{
...params.inputProps,
autoComplete: "new-password" // disable autocomplete and autofill
}}
InputProps={{
...params.InputProps,
startAdornment: <strong>{params.inputProps.value.split(" ")[0]}</strong>
}}
/>
)}
...
Your next challenge would be to remove the additional country code from the input-value or even better, move to a controlled value approach.
I'm using MUI 5 and React and I have this issue that the outlined text field shows line through the label as per the screenshot
I have no idea how to fix it.
My fields looks like this
<FormControl fullWidth variant="outlined">
<InputLabel shrink id={labelId}>
{label}
</InputLabel>
<Controller
as={
<Select
displayEmpty
name={name}
labelId={labelId}
id={name}
label={label}
>
<MenuItem key={`no${name}`} value="">
{intl.formatMessage({
defaultMessage: 'No proxy number',
})}
</MenuItem>
{items.map(pn => (
<MenuItem key={pn.id} value={pn.id}>
<ListItemIcon>
<img
src={pn?.country?.flagIconUrl}
alt={pn.countryCode}
width="20px"
height="15px"
/>
</ListItemIcon>
{pn.value}
</MenuItem>
))}
</Select>
}
name={name}
control={control}
/>
<FormHelperText>{helperText}</FormHelperText>
</FormControl>
Then the above is used as a function called SelectFormInput to make the specific fields
<Grid item xs={6}>
<SelectFormInput
control={control}
labelId="proxyNumber"
name="proxyNumber"
items={proxyNumbers}
label={intl.formatMessage({
defaultMessage: 'Proxy phone Number',
})}
helperText={intl.formatMessage({
defaultMessage: 'Optional. Phone number used by site users',
})}
/>
</Grid>
<Grid item xs={6}>
<SelectFormInput
control={control}
labelId="inboundProxyNumber"
name="inboundProxyNumber"
items={inboundProxyNumbers}
label={intl.formatMessage({
defaultMessage: 'Inbound Proxy Number',
})}
helperText={intl.formatMessage({
defaultMessage: 'Optional. Phone number seen by candidate',
})}
/>
</Grid>
I was unable to find any solution on the net for my specific situation.
I found a solution that helped my specific situation.
I had to add this
input={<OutlinedInput notched label={label} />}
Inside my
<Select
displayEmpty
name={name}
labelId={labelId}
id={name}
input={<OutlinedInput notched label={label} />} />
And so the label UI has been fixed
There is a <fieldset/> tag within the FormControl, and the <legend/> inside of it is making the white block possible.
https://github.com/mui/material-ui/blob/de11911f2e3b15b9fe07ce2625a3ce1cc593093c/packages/mui-material/src/OutlinedInput/OutlinedInput.js#L142
https://github.com/mui/material-ui/blob/de11911f2e3b15b9fe07ce2625a3ce1cc593093c/packages/mui-material/src/OutlinedInput/NotchedOutline.js#L79
I am not sure in your case (<Select/>), but if you are trying to use raw input with the outlined style, you have to give label prop to the <OutlinedInput/>.
<FormControl fullWidth>
<InputLabel>Phone</InputLabel>
<OutlinedInput label="Phone" /> // without label="...", you get the line-through
</FormControl>
you can also try add a background color to InputLabel, on createTheme, this works for me:
import { createTheme } from '#material-ui/core';
const theme = createTheme({
overrides: {
MuiInputLabel: {
root: {
backgroundColor: '#ffffff',
paddingLeft: '4px',
paddingRight: '4px'
}
}
}
});
export default theme;
I have a search bar that uses Autocomplete from material ui to provide suggestions, and inside of it i have text field where I take text as input.
The only problem is that when i type anything in the TextField I can see 2 clear buttons (x button) one on the left of the loading screen and one on the right, and when the loading screen disappears i get 2 clear buttons next to each other. I want to remove the one on the left as it looks bad, and I don't know why it's there.
Search.jsx:
<div className={searchClasses.search}>
<Autocomplete
options={isEmpty ? [] : suggestionsList}
freeSolo
style={{width: "100%"}}
getOptionLabel={(option) => option.title}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
margin="normal"
required
fullWidth
autoFocus
loading={loading}
style={{margin: 0}}
classes={{ notchedOutline: classes.input }}
onChange={handleOnChange}
onKeyDown={e => handleKeyDown(e)}
placeholder="Search..."
type="search"
InputProps={{
...params.InputProps,
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
endAdornment: (
<React.Fragment>
{loading ? <CircularProgress color="inherit" size={20} /> : null}
{params.InputProps.endAdornment}
</React.Fragment>
),
classes: { notchedOutline: classes.noBorder }
}}
/>
)}
renderOption={(option, { inputValue }) => {
const matches = match(option.title, inputValue);
const parts = parse(option.title, matches);
return (
<div>
{parts.map((part, index) => (
<span
key={index}
style={{ fontWeight: part.highlight ? 700 : 400 }}
>
{part.text}
</span>
))}
</div>
);
}}
/>
</div>
Solution
Create a new CSS stylesheet (let say styles.css) and add the following code:
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
Next, import this stylesheet at the beginning of your Search.jsx:
import "./styles.css";
/* Your code here ... */
Explanation
The left "X" cancel button is present because Webkit-based browsers such as Chrome and Safari automatically adds the cancel button to all <input type="search"> elements. Since your TextField element has the prop type="search", it renders <input type="search"> to the screen and hence your browser automatically adds the "X" button.
The default "X" button can be selected using the ::-webkit-search-cancel-button psuedo-element selector. In our style.css, we select all default "X" buttons in all <input type="search"> elements and we hide them using -webkit-appearance: none;
How is possible to add onClick event on the options - i mean when u click the selected option i want to link somewhere, not to just put in the searchField(or textField)? I search really hard on the web, but i just cant find how to do that.
<Autocomplete
freeSolo
classes={classes}
options={searchItems}
getOptionLabel={(option) =>
option.title ? option.title : option.name
}
style={{ width: 300, borderRight: "none", borderLeft: "none" }}
renderInput={(params) => {
return (
<TextField
{...params}
variant="outlined"
fullWidth
placeholder="Search for movie, tv or person"
value={value}
onChange={(e) => handleChange(e)}
/>
);
}}
/>
You need to move the onChange function inside the Autocomplete component as below:
<Autocomplete
id="combo-box-demo"
classes={classes}
options={searchItems}
getOptionLabel={(option) =>
option.title ? option.title : option.name
}
style={{ width: 300, borderRight: "none", borderLeft: "none" }}
onChange={(e, value) => console.log(e.target, value.title)}
renderInput={(params) => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
Here is an example that I have created. When the onChange function in the Autocomplete component is triggered, it displays values on the console. According to the doc, onchange function here pass three props called event, value and reason.
hello i have a problem because, like you can see in the image, when i use react-select and textfiled with variant="outlined" because the label of the textfield shows itself even over the option, there is a class or something to solve this?
<TextField
variant="outlined"
label="First Name"
/>
thank you
I solved this with a zIndex on the <TextField:
<TextField
label="Points"
type="number"
min={1}
max={999}
value={props.question.value}
disabled={!props.question.expanded}
onChange={ev => props.updateValue(props.ix, ev.target.value)}
InputLabelProps={{
shrink: true,
}}
variant="outlined"
style={{ width: '5em', zIndex: -1 }}
margin="dense"
fullWidth
/>