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);}
Related
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'm unable to figure out how to render outlined input type(one of the standard Material-UI input styles when used with text mask).
I copied the code sample from here: https://material-ui.com/components/text-fields/
But it only gives a sample for regular(underlined) input but nothing for outlined.
This is what i'm trying to do but it doesnt work:
const ExpirationMask = props => {
const { inputRef, ...other } = props
return <MaskedInput
{...other}
ref={ref => {inputRef(ref ? ref.inputElement : null)}}
mask={[/\d/, /\d/,'/' ,/\d/, /\d/]}
placeholderChar={'\u2000'}
/>
}
<FormControl
variant='outlined' //this doesnt work
fullWidth
>
<InputLabel>Expiration</InputLabel>
<Input
value={ccExpiration}
onChange={(e, v) => setCCExpiration(e.target.value)}
placeholder='MM/YY'
variant='outlined' //this doesnt work either
inputComponent={ExpirationMask}
/>
</FormControl>
I found a solution for it. I didn't realize that TextField is just a wrapper for the Input.
There is also another wrapper for the Input which is called OutlinedInput. So this was exactly what I ended up using:
<FormControl
fullWidth
margin='dense'
>
<InputLabel
classes={{ root: classes.expInputRoot }}
error={ccExpiration.trim().length < 5}
color='primary'>
Expiration
</InputLabel>
<OutlinedInput
value={ccExpiration}
onChange={(e, v) => setCCExpiration(e.target.value)}
label="Expiration"
placeholder='MM/YY'
error={ccExpiration.trim().length < 5}
inputComponent={ExpirationMask}
/>
</FormControl>
In doing so i encountered another problem however with an InputLabel that wasn't aligning properly(not sure if it is a bug or what), so i ended up manually changing styles for it like this:
expInputRoot: {
margin:'-8px 0 0 14px'
}
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"
...
I am looking for a way to pre-set a default option in a Autocomplete component, just when the ajax call completes loading the list of options.
So the use case would be this: when the user opens the page, in the background a list of options would be loaded into state from the ajax response. I want to select the first retrieved option from the list, as soon as it gets loaded. Currently, I just have a basic way to offer a list of options:
<Autocomplete
options={defaultProps.options}
getOptionLabel={option => option.name}
renderInput={params => (
<TextField {...params} variant="outlined" fullWidth />
)}
/>
but don't know to select the first one when it gets loaded.
I'm using useEffect to demonstrate an ajax request on component mount.
You can use the value property to set the value after the component has been rendered.
While waiting for the ajax request to resolve, you can use the loading prop to change the component mode to loading
const [options, setOptions] = useState([]);
const [def, setDef] = useState(null);
useEffect((()=>{
setTimeout(()=>{
const tempArr = [{name:'Subject'},{name:'Another Subject'}];
setOptions(tempArr);
setDef(tempArr[0]);
}, 1000);
}), []);
return (
<div className="App">
<h1>Autocomplete</h1>
{<Autocomplete
options={options}
loading={!def}
value={def}
getOptionLabel={option => option.name}
renderInput={params => (
<TextField {...params} variant="outlined" fullWidth />
)}
/>}
</div>
);
In latest version of Material UI theres an autoHighlight prop.
<Autocomplete
options={defaultProps.options}
getOptionLabel={option => option.name}
renderInput={params => (
<TextField {...params} variant="outlined" fullWidth />
)}
autoHighlight // add this
/>
See the API for Autocomplete
I am using #material-ui/core: "4.0.1"
Using a TextField component and trying to change the cursor to 'not-allowed'.
Simple code as below
<TextField style={{cursor:'not-allowed'}}
id="standard-name"
label="Name"
margin="normal"
disabled={true}
/>
But since the TextField it self have other component inside, disabled cursor icon only appear in top part of the ui (not on top of actual text area) as below
Can see two divs and one input control under TextField
Tried using glamor to overwrite the class as below but no luck
const styles = glamor.css({
cursor:'not-allowed'
})
function MyStyledDiv({ ...rest}) {
return (
<div
className={`${styles} ${'MuiInputBase-input'}`}
{...rest}
/>
)
}
function App() {
return (
<div className="App">
<p>Testing</p>
<MyStyledDiv>
<TextField style={{cursor:'not-allowed'}}
id="standard-name"
label="Name"
margin="normal"
disabled={true}
/>
</MyStyledDiv>
</div>
);
}
Is there anyway I can achieve this
Try adding the styling to the inputProps prop:
<TextField
id="standard-name"
label="Name"
margin="normal"
disabled={true}
inputProps={{style: {cursor:'not-allowed'}}}
/>