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'}}}
/>
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);}
I'm working on replacing the DatePicker component in our app with the new #mui DatePicker, and I'm having some trouble getting the TextField to render without the floating label and the notched input style. Here is my latest attempt:
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
onError={(reason, value) => console.log(reason, value)}
disableOpenPicker
className={styles.datepicker}
disableMaskedInput
onChange={() => undefined}
onAccept={handleAccept}
open={datePickerVisible}
value={getSafeDate(value) as Date}
onClose={partial(handleDatepickerVisibilityChange, false)}
{...datepickerProps}
renderInput={(params) => (
<TextField
id={id}
{...inputProps}
{...params}
onChange={handleInputChange}
error={errorText !== null}
helperText={errorText}
onBlur={handleValueChange}
onKeyPress={handleKeyPress}
hiddenLabel
size='small'
fullWidth
/>
)}
/>
</LocalizationProvider>
I've tried many different combinations for TextField props, such as adding InputLabelProps={{shrink:false}}, InputLabelProps={{shrink:true}}, and inputProps={{notched:false}} but always end up looking like this:
Does anyone have an idea of how to correct this, or if it's possible?
Thanks!
The issue was fixed in release v5.4.0
[TextField] Remove notch when no label is added (#30560) #alisasanib
Updating to v5.4.0 should solve the issue.
When using a Textfield as the first child of DialogContent:
export default function App() {
return (
<Dialog open={true}>
<DialogTitle>Hey</DialogTitle>
<DialogContent>
<TextField
fullWidth
id='name'
label={'Foo'}
name='name'
required
type='text'
value={'Bar'}
/>
</DialogContent>
</Dialog>
);
}
its label (when using `variant="outlined") gets clipped. See codebox sample. Any way to fix this problem? e.g. by customizing the theme?
You can easily fix that issue by adding some margin to the TextField like the following.
sx={{ marginTop: 2 }}
Or you could wrap the TextField using Box inside the DialogContent like the following.
<Box p={1}>
<TextField
...
/>
</Box>
I have tried a couple of ways in order to make the material UI's autocomplete field of type required but I am not getting the behavior that I wanted. I had encapsulated my field inside react hook form <Controller/> yet no luck. I want to trigger message 'Field is mandatory' on submit when nothing is added to the field.
Below is the code snippet, I have not removed comments so that it becomes a bit easier for others to understand the approach that I had followed earlier -
<Controller
name="displayName"
as={
<Autocomplete
value={lists}
multiple
fullWidth
size="small"
limitTags={1}
id="multiple-limit-lists"
options={moduleList}
getOptionLabel={(option) => option.displayName}
renderInput={(params,props) => {
return (
<div>
<div className="container">
<TextValidator {...params} variant="outlined" label="Display Name*" className="Display Text"
name="displayName" id="outlined-multiline-static"
placeholder="Enter Display-Name" size="small"
onChange={handleDisplay}
// validators={['required']} this and below line does throw a validation but the problem is this validation stays on the screen when user selects something in the autocomplete field which is wrong.
// errorMessages={['This field is required']}
// withRequiredValidator
/>
</div>
</div>
)
}}
/>
}
// onChange={handleDisplay}
control={control}
rules={{ required: true }}
// required
// defaultValue={options[0]}
/>
<ErrorMessage errors={errors} name="displayName" message="This is required" />
You can use the following logic to get it worked. Though this might not be the best solution but works.
<Autocomplete
renderInput={(params) => (
<TextField
{...params}
label={value.length === 0 ? title : title + " *"} //handle required mark(*) on label
required={value.length === 0}
/>
)}
/>
I tried using the built in required in textfield for autocomplete, and it works like a charm. Maybe you can use this as a reference.
<Autocomplete
renderInput={(params) => {
<TextField {...params} required />
}
// Other codes
/>
Since you are rendering <TextValidator>, you should apply mandatory(required) attribute to that component not on <AutomComplete>.
Try this if your Material UI version is v5
<TextField
{...params}
required
label="Tags"
value={value}
InputProps={{
...params.InputProps,
required: value.length === 0,
}}
/>
I use material UI and a field text of type TextField. But when I was seized in my field email, the seizure does not appear to the screen and the value does not change in the email field.It always remains the same value.
Handle change is not working. the value is not passing to the handleChanges remains the same value
<TextField fullWidth={true}
className={classes.margin}
label={<FormattedMessage id="LoginTemplate.email" defaultMessage="Email" />}
id="email"
ref="email"
name="eamil"
type="email"
value={authentification.email}
onChange={this.handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Email className={classes.inputIconsColor} />
</InputAdornment>
),
}}
/>
Here is the code. Correct me What is the issue in that
Thanks in Advance.
In order to make the value change, you need to change a state (in the screen or external).
For instance (with bad performance but just to explain):
add to your cunstrunctor if exists:
constructor(props) {
super(props);
this.state = {
emailInputText: undefined //or empty string
}
}
Then change TextField component value and onChange props to:
value={this.state.emailInputText}
onChange={(text) => this.setState({emailInputText: text})}
I will consider to remove the ref='email'.