I am currently facing difficulties with React Mui's Autocomplete component. The Autocomplete is placed in a FormControl component.
In the renderInput prop of the Autocomplete, I added a TextField, but its label is being cut :
I tried playing with padding & margins, but it does not change anything and I do not know where the problem resides.
My code looks like this :
<Autocomplete
autoHighlight
value={value ?? null}
onChange={(event, newValue) => {
updateValue(newValue);
}}
inputValue={inputValue}
onInputChange={(event, newInputValue) => {
setInputValue(newInputValue);
}}
sx={{ overflow: "hidden", whiteSpace: "pre-wrap", p: 0, m: 0 }}
options={displayedOptions}
getOptionValue={(option) => option?.optionValue ?? ""}
getOptionLabel={(option) => option?.optionLabel ?? ""}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
fullWidth
required={required}
label={label}
InputLabelProps={{ shrink: true }}
/>
)}
/>
As anyone faced this problem before ?
The problem is related to the styles.
From this sx prop:
sx={{ overflow: "hidden", whiteSpace: "pre-wrap", p: 0, m: 0 }}
You need to delete this part overflow: "hidden", so it should be like:
sx={{ whiteSpace: "pre-wrap", p: 0, m: 0 }}
Related
I'm trying to apply maxWidth to the TextField from material-ui but it seems like I can't.
import * as React from "react";
import Box from "#mui/material/Box";
import TextField from "#mui/material/TextField";
export default function BasicTextFields() {
const messages = [
{ id: 1, message: "short message" },
{
id: 2,
message: " It comes with three variants: outlined."
},
{
id: 3,
message:
"The TextField wrapper component is a complete form control including a label, input, and help text."
}
];
return (
<Box
component="form"
sx={{
"& > :not(style)": { m: 1, width: "25ch" }
}}
noValidate
autoComplete="off"
style={{ display: "flex", flexDirection: "column" }}
>
{messages.map((e) => (
<TextField
id="outlined-basic"
key={e.id}
value={e.message}
label="Outlined"
variant="outlined"
multiline={true}
style={{ maxWidth: "350px" }}
/>
))}
</Box>
);
}
Currently, the max-width for TextField seems not applying correctly. If I look at TextField with the inspect, it says 200px
I know I can apply regular width like this.
<TextField
id="outlined-basic"
key={e.id}
value={e.message}
label="Outlined"
variant="outlined"
multiline={true}
style={{ width: "350px" }}
/>
But what I want here is maxWidth.
Ideally, I like to have the width of text input based on the message length which I pass to the value property like this value={e.message}.
So before the width hits 350px, width needs to be kind of auto like the width is depends on the message, but once it hits 350px, it will keep being 350px.
Is that possible with the TextField component?
Attampts
I used InputProps proptery.
{messages.map((e) => (
<TextField
id="outlined-basic"
key={e.id}
value={e.message}
label="Outlined"
variant="outlined"
multiline={true}
InputProps={{
style: { maxWidth: "350px" }
}}
/>
))}
But I got width 200px.
if you wrap in an div?
<div style: { width: "400px" }>
<TextField
id="outlined-basic"
key={e.id}
value={e.message}
label="Outlined"
variant="outlined"
multiline={true}
InputProps={{
style: { maxWidth: "350px" }
}}
/>
</div>
how not to spin search icon after open autocomplete input?
<Autocomplete
popupIcon={<Search />}
onChange={(e, value) => handleFound(value)}
options={['0', '2', '3', '1']}
sx={{ width: '100%' }}
renderInput={(params) =>
<TextField {...params} placeholder={'type anything...'} />
}
/>
You need to stop the rotation from the popup indicator styles, like this:
<Autocomplete
popupIcon={<Search />}
onChange={(e, value) => handleFound(value)}
options={["0", "2", "3", "1"]}
sx={{
width: "100%",
"& .MuiAutocomplete-popupIndicator": { transform: "none" },
}}
renderInput={(params) => (
<TextField {...params} placeholder={"type anything..."} />
)}
/>
Note that this is not the only solution but in my opinion is the fastest...
I try to use the MUI in my project, and all the input fields I use don't behave correctly.
it supposed to look like this
but when I use it it will look like this
import Box from '#mui/material/Box'
import TextField from '#mui/material/TextField'
import Autocomplete from '#mui/material/Autocomplete'
<Autocomplete
className="mt-3"
size="small"
id="country-select-demo"
options={arr}
autoHighlight
getOptionLabel={(option) => option.label}
renderOption={(props, option) => (
<Box
component="li"
sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
{...props}
>
{option.label}
</Box>
)}
renderInput={(params) => (
<TextField
{...params}
label="Choose.."
inputProps={{
...params.inputProps,
}}
/>
)}
I just found out that uninstalling the react-bootstrap fix this problem.
<StyledAutocomplete
sx={{ width: "40%", ml: "10px", mr: "10px" }}
id='multiple-limit-tags'
options={locationOptions}
filterSelectedOptions
autoComplete={true}
onChange={handleLocationChange}
getOptionLabel={option => option.label}
freeSolo
autoHighlight
forcePopupIcon
autoFocus
renderTags={(value, getTagProps) =>
value.map((option, index) => (
<Chip key={index} variant='filled' label={option} {...getTagProps({ index })} />
))
}
renderInput={params => (
<TextField
{...params}
variant='outlined'
label='Location'
placeholder={selectedLocations.length < 1 ? "Country" : ""}
/>
)}
/>
I wanna be able to render the input into a chip without multiple prop, the renderTags props only seems to work on multiple
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.