After working diligently on the autocomplete component, I am pleased with how the feature turned out. However, when this component is rendered as a widget on other pages, I'm encountering some style issues due to global styling overrides or additions on the page that hosts my component.
Here is how it appears in my local environment: https://i.sstatic.net/JUC5U.png
And this is how it looks once deployed and checked on one of the pages: https://i.sstatic.net/26J5c.png https://i.sstatic.net/vPWAx.png
Despite spending the entire day trying to resolve these issues without success, I have identified the specific styles causing problems for my component:
https://i.sstatic.net/YJWNS.png
https://i.sstatic.net/lZ3q7.png
These styles are used to hide the outlined style of the textfield
const useStyles = makeStyles(theme => ({
root: {
"& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
border: 'none !important',
outline: 'none'
},
"& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
border: 'none !important',
outline: 'none'
}
}
}));
Below is an insight into how my autocomplete components are structured:
<Autocomplete
id="listings-filter"
multiple
disableCloseOnSelect={true}
freeSolo
clearOnBlur={false}
limitTags={5}
disableCloseOnSelect={true}
blurOnSelect={false}
options={options}
groupBy={(option) => option.key }
onInputChange={handleInputChange}
onChange={handleOptionSelection}
disableCloseOnSelect
getOptionLabel={(option) => option.value}
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option.value}
</React.Fragment>
)}
style={{ width: "100%" }}
renderInput={(params) => (
<TextField
id='autocomplete-input'
{...params}
margin={'dense'}
className={autocompleteClasses.root}
InputLabelProps={{
shrink: true
}}
variant='outlined'
label="Search listings by address, MLS or property name"
placeholder='Type the address, MLS or property name'
/>
)}
/>
I attempted to apply inputProps to the textfield and adjust styles there, but this did not yield positive results. Similarly, I tried adding styles within the makeStyles section, yet I struggle to pinpoint the exact class for MUI style overrides. The nature of this issue, seemingly related to a generic input component rather than a Material UI component, further complicates matters.
I am unsure if resolving this via React is feasible or if resorting to a CSS file is necessary to mitigate this behavior. Any guidance or assistance would be greatly appreciated!
EDIT: In addition to referencing another StackOverflow question and utilizing the inputProps of the TextField component, I encountered an error where the autocomplete component crashes upon clicking the input - error message: Uncaught TypeError: Cannot read property 'focus' of null
const useStyles = makeStyles(theme => ({
root: {
"& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
border: 'none !important',
outline: 'none'
},
"& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
border: 'none !important',
outline: 'none'
}
},
input: {
border: '10 !important',
borderColor: 'red',
boxShadow: 'unset !important',
color: 'red'
}
}));
renderInput={(params) => (
<TextField
id='autocomplete-input'
{...params}
margin={'dense'}
className={autocompleteClasses.root}
InputLabelProps={{
...params.InputLabelProps,
shrink: true
}}
inputProps={{
...params.InputProps,
classes:{
root: autocompleteClasses.input,
}
}}
variant='outlined'
label="Search listings by address, MLS or property name"
placeholder='Type the address, MLS or property name'
/>
)}