I'm using Material-UI Autcomplete component (Free solo version) and everything is working fine until i added resposive to the drawer variant={!matchesSM ? 'persistent' : null}.
<Drawer
className={classes.drawer}
variant={!matchesSM ? 'persistent' : null}
anchor="left"
open={sidebarOpen}
classes={{
paper: classes.drawerPaper,
}}
onClose={handleDrawerClose}
>
when opening the side drawer in tablet/mobile mode TextField Input is unresponsive.
here is some screenshot
const textFieldHandler = () => {
handleDrawerClose();
inputRef.current.focus();
};
<TextField
{...params}
ref={inputRef}
onClick={textFieldHandler}
placeholder="Search input"
margin="dense"
...
Expected behavior
On tablet/mobile mode, when opening the drawer and clicking on the textfield, drawer should be closed and textfield should be focused.
Actual behavior
Autocomplete is not focused in tablet & mobile when drawer is opened.
I created this live running example to illustrate the problem:
Text Field only works when sidebar is closed
I can't figure it out why it's not working.
Any feedback about this issue ?
I think I've found a better solution :
thanks to this post on github : https://github.com/mui-org/material-ui/issues/16518#issuecomment-625218550
Adding a the "disableEnforceFocus" props to the Mui Drawer allow other inputs to be focused correctly.
<Drawer
disableEnforceFocus
{...otherProps}
>
In Toolbar.js you can have an onClick on Textfield and call handleDrawerClose
Working demo
Like this
<TextField
{...params}
onClick={handleDrawerClose}
placeholder="Search input"
margin="dense"
...
Edit: Based on comment.
If successfully focus on the auto complete and also open the suggestions, then we can use the Autocomplete props openOnFocus , clearOnBlurand inputRef prop of Textfield. Then in the onClick call focus() with-in setTimeout
<Autocomplete
openOnFocus //<---here
clearOnBlur //<---here
freeSolo
id="free-solo-2-demo"
disableClearable
options={top100Films.map(option => option.title)}
renderInput={params => (
<TextField
inputRef={ref} //<---here
{...params}
onClick={e => {
handleDrawerClose(); //<---here
setTimeout(() => ref.current.focus()); //<---here
}}
placeholder="Search input"
margin="dense"
color="secondary"
...
Related
Given the following code:
const DatePeacker = () =>{
return (
<LocalizationProvider dateAdapter={AdapterMoment}>
<Stack spacing={3}>
<DesktopDatePicker
label="Día de publicación"
inputFormat="DD/MM/yyyy"
value={fechavalor}
onChange={handleDatepicker}
renderInput={(params) => <TextField required size="small" color="primary" style = {{width: 300}} {...params} inputProps={{ ...params.inputProps, placeholder: "dd/mm/aaaa" }} />}
/>
</Stack>
</LocalizationProvider>
)}
The following behaviour on the DatePicker label occurs on clicking outside it or in different elements,either click an option of a select or writing in the textfield (which has a function to capitalize new words. It does not happen when clicking outside the component. May it be cause by reloading the value of the datepicker for some reason?
I leave here the handleDatePicker function:
const handleDatepicker = (newvalue)=>{setFechavalor(newvalue);}
What's happening is on page load, the: form.values.statistics?.ethnicity generates the Chips fine but doesn't set the selected values in the Autocomplete component.
Like in the image below, the Caucasian appears to be not selected when it should be selected from the Autocomplete component
What I've thought of and tried so far in which data.data.attributes.statistics.ethnicity === form.values.statistics.ethnicity:
Maybe I'm missing the "name" property from the Autocomplete component - tried adding so, but I can't. It says the property doesn't exist for the component. Which is weird?
value={ethnicityOptions[arrayOfSelectedIds]} or value={ethnicityOptions[data.data.attributes.statistics.ethnicity]}
Autocomplete code:
<Autocomplete
multiple
options={ethnicityOptions}
getOptionLabel={(ethnicityOptions) => ethnicityOptions.name}
id="multiple-tags"
value={form.values.statistics?.ethnicity}
onChange={(e, newValue) => {
form.setFieldValue('statistics.ethnicity', newValue);
form.handleChange(e);
}}
renderTags={() => null}
renderInput={(params) => (
<Grid className={classes.autoCompleteGrid}>
<TextField
{...params}
variant="outlined"
onChange={form.handleChange}
placeholder="Ethnicities"
/>
</Grid>
)}
/>
Code for generating Chips:
{form.values.statistics?.ethnicity
? form.values.statistics?.ethnicity?.map((v) => (
<Chip
key={v.name}
label={v.name}
onDelete={() => {
onEthnicityChipDelete(v);
}}
/>
))
: ''}
I'm currently stuck on this and I might be just missing something. Any help to breakthrough would be really appreciated!
I was using previous Mui version 4.11.4 with the Autocomplete component and everything worked well with the disablePortal prop.
However, i am using Mui 5 now and the autocomplete dropdown list sometimes show on top instead of always being on the bottom as what i wanted.
<Autocomplete
disablePortal={true}
id='controlled-demo'
ref={idRef}
name={id.current}
onChange={(e, value) => {
const id = idRef.current.getAttribute('name');
handleOptionChange(e, value, id);
}}
options={getExercisesByCategoryAndMusclegroup(exercise)}
getOptionLabel={(option) => `${option.title}`}
isOptionEqualToValue={(option, value) => option.title === value.title}
renderInput={(params) => (
<TextField
{...params}
name='exercise'
// onChange={(e, value) => handleOptionChange(e, value)}
label='Search exercise...'
variant='outlined'
size={isMatched ? 'small' : 'medium'}
/>
)}
/>
I've tried using a custom Popper component as i saw on another post setting the placement to 'bottom' but that didnt resolve my issue.
Is there a bug to the new v5? Anyone else is experiencing this?
I don't know if this is a bug in MUI v5, but what worked for me is to simply remove the disablePortal prop, which automatically set the placement of the dropdown list to the bottom for any number of elements in the list.
I am using the component 'AutoComplete' of material Ui to render multiple Checkboxes, and show the options selected into a TextField.
The error occurs when I submit the form. The values of checkboxes selected are empty, like this: category: ""
It seems the react hook form is not recognizing the name "category", like below:
<Autocomplete
id="checkboxes-tags-demo"
fullWidth
multiple
limitTags={2}
getOptionLabel={(option) => option.title}
disableCloseOnSelect
noOptionsText="Nenhuma opção foi encontrada"
variant="outlined"
options={newCategories}
renderOption={(option, {selected}) => {
return (
<Box key={option.id} ml={option?.isSub ? 3 : 0}>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
checked={selected}
/>
{option.title}
</Box>
)
}
}
renderInput={(params) =>
<TextField
name="category"
inputRef={register}
{...params}
label="Selecione a categoria"
variant="outlined" />}
/>
}
/>
You need to wrap the Material UI Autocomplete with the Controller Component provided by React Hook Form. See this section in the documentation for further information.
I have a problem using the Autocomplete component provided by Material UI for React.js.
Here is what my component looks like :
<Autocomplete
options={options}
value={value}
disableCloseOnSelect
onChange={handleChange}
limitTags={4}
getOptionLabel={(option) => option.name }
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
className={classes.checkbox}
checked={selected}
/>
{option.name}
</React.Fragment>
)}
renderInput={(params) => (
<TextField {...params} variant="outlined" label={label} placeholder={label} />
)}
{...custom}
/>
I can't get the feature disableCloseOnSelect to function with a controlled component, as it does not prevent the list from closing after select... If I remove the props value and onChange everything works perfectly, but I need them for my project.
Does anybody have the same problem or see anything wrong with the way I am handling things ?
There is an issue that seems to match mine here. In that case, could it be a bug ?
This is most probably caused by the mother component re-rendering. Autocomplete's state needs to be localised.
Here's a sandbox demonstration of the difference this makes:
https://codesandbox.io/s/priceless-wilson-zz59q?file=/src/App.js
It also has performance benefits.