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...
Related
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 }}
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.
I am using #material-ui autocomplete for search and I want to add search icon next to autocomplete component
I tried something like this but after changing ---- option fields is not displaying
import TextField from "#material-ui/core/TextField";
import Autocomplete from "#material-ui/lab/Autocomplete";
.
.
.
<Autocomplete
id="combo-box-demo"
options={this.state.results} // .map((option) => option.title_display)
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
onInputChange={this.handleInputChange}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
InputProps={{
endAdornment: (
<InputAdornment>
<IconButton>
<SearchIcon />
</IconButton>
</InputAdornment>
)
}}
/>
)}
/>
ANd if I just add searchicon it get added below the autocomplete component
<Fragment>
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
<SearchIcon />
</Fragment>
https://codesandbox.io/s/material-demo-forked-qt99q?file=/demo.js
[this is output][1]
[1]: https://i.stack.imgur.com/JBSvO.png
import React, { useState, useEffect } from 'react';
import { TextField} from '#material-ui/core'
import InputAdornment from '#material-ui/core/InputAdornment';
import Autocomplete from '#material-ui/lab/Autocomplete';
import SearchIcon from '#material-ui/icons/Search';
import { makeStyles, Theme } from "#material-ui/core/styles";
export default function AddBusiness() {
const useStyles = makeStyles((theme: Theme) => ({
margin: {
padding: "10px 5px 5px 5px",
borderRadius: 4,
backgroundColor: theme.palette.common.white,
margin: theme.spacing(0),
border: "1px solid rgb(157, 157, 157)",
width: "100%",
},
}));
const classes = useStyles();
const [cityData, setCityData] = React.useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/todos')
.then(data => data.json())
.then(res => setCityData(res))
.catch(error => console.log(error))
}, [])
return (
<Autocomplete
id="combo-box-demo"
options={cityData}
getOptionLabel={(option: any) => option.title}
className={classes.margin}
style={{ paddingBottom: '8px' }}
renderInput={(params) => <TextField {...params} label=""
placeholder="Search City"
InputProps={{ ...params.InputProps,
startAdornment: ( <InputAdornment position="start"> <SearchIcon />
</InputAdornment> ),
disableUnderline: true }} />}
/>
)}
You can use display: "flex" for the parent to align its child in the same line.
And also align search icon at the center of the element,
<SearchIcon style={{ cursor: "pointer", padding: "17px" }} />
Hope you are expecting the same use case. Let me know if you are facing any issue.
Sample demo:- https://codesandbox.io/s/material-demo-forked-v17jz?file=/demo.js
This is the way you can customize the popup Icon
<Autocomplete
className={classes.root}
id="combo-box-demo"
options={boards}
getOptionLabel={(option) => option}
forcePopupIcon={true}
popupIcon={<SearchIcon />}
renderInput={(params) => (
<>
<TextField
placeholder="search"
{...params}
label="Combo box"
variant="filled"
/>
</>
)}
/>