I have the following code:
<TextField
fullWidth
InputLabelProps={{style:InputLabelStyle, shrink: this.props.value ===null? false:true}}//problem here
label={<><IoIcons.IoMdBusiness/> Name</>}
id="outlined-size-small"
value={selectedValue?.first_name}
color="primary"
InputProps={{readOnly: true}}
/>
I'm trying to "fix" a bug that makes the label overlap the text if this is placed programmatically. So It seems I have to activate the label property "shrink". So I'm trying to make it just activate it when the textfield has something inside, otherwise, shrink should be false. However, I don't know how to reference value inside the inputLabelProps property. this.props.value is not working.
Related
I have a functional Mui Autocomplete that lets the user select from options or make his own input. However, the value is not stored on useState when an option is clicked, only when the input loses its focus. I have checked some tutorials and apparently I have nothing different, but theirs work as expected (selected option on selection is stored as useState value).
CodeSandbox here
<Autocomplete
key={"casa"+index}
freeSolo
autoSelect
fullWidth
value={i.casa}
onChange={e=>ponervalor(e,index)}
options={casasNamesList}
id={"casasNamesList"+index}
size="small"
color="primary"
autoComplete={false}
renderOption={(props, option) => {
return (
<span {...props} style={{ backgroundColor: "primary", border:"0.5px solid black"}}>{option}</span>);
}}
renderInput={(params) => <TextField {...params} label="Casa" name="casa" variant="outlined" />}
/>
Edit: To add information, I believe the property autoSelect has something to do with this problem of mine, as it states:
If true, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different
option or changes the character string in the input.
However, if I set it to false, the selected option is never stored as value.
Well, finally I was able to resolve it by not using onChange and use instead:
onInputChange={(e,newvalue)=>ponervalorcasa(e,newvalue,index)}
I want to change default value of TextField when state change but it doesn't work. I guess it is doesn't re-render.
<TextField
multiline={true}
rows={15}
disabled
id="outlined-basic" label="" variant="outlined"
defaultValue={!isEn?data.data[0].description:data.data[0].descriptionLocalization.en}
/>
<Button style={{position:"absolute",right:"20px",bottom:"5px"}} onClick={changeStateIsEn}>Save</Button>}
Default value is not meant to be changed with state.
You should set the value for reflecting the default value
<TextField
multiline
rows={15}
disabled
id="outlined-basic"
label=""
variant="outlined"
defaultValue="Something that will stay there initially only"
value={!isEn ? data.data[0].description : data.data[0].descriptionLocalization.en}
/>
There are two parts missing to your TextField component that is required to tie the input to state.
As user Mohammad Fasial said, the defaultValue prop is only for the default value the component will have. The correct prop you're looking for is value. State will need to equal value.
To listen for changes when the user inputs new information into the TextField input, you'll need to use the onChange prop. The onChange prop (on change listener) let's you provide a function as an argument to run when the input value changes. In this case we want to set onChange to run setExampleState to set the state to the value of the input field by using the event.target.value property.
function ExampleComponent(){
const [exampleState, setExampleState] = useState([]);
...
return (
<>
<TextField
multiline={true}
rows={15}
disabled
id="outlined-basic" label="" variant="outlined"
defaultValue={!isEn?data.data[0].description:data.data[0].descriptionLocalization.en}
value={exampleState}
onChange={(event) => setExampleState(event.target.value)}
/>
<Button style={{position:"absolute",right:"20px",bottom:"5px"}} onClick={changeStateIsEn}>Save</Button>
</>
);
}
To learn more about the different properties TextField has, you can look at the TextField API Documentation. There are also a lot of TextField code examples that can be expanded on the Material-UI site as well.
Update the key of Element or Container after Default value Change
I have Material-UI TextField:
<TextField id="gen_ref_num" className="col-6 form-control-sm" label="Number" variant="filled" value={this.props.invoice.gen_ref_num} onChange={this.handleChange}/>
And this.props.invoice.gen_ref_num has the value already preloaded. Unfortunately, the label overlaps with the content. When I am start editing the field, then the label moves upside and sits in the right position (no overlap anymore). How to ask Material-UI TextField to respect the pre-loaded values and to move label upwards?
The following code is the answer:
InputLabelProps={{ shrink: !!this.state.value }}
When adapted to the code in the question, the code ir:
InputLabelProps={{ shrink: !!this.props.invoice.gen_ref_num }}
More is written about this at https://github.com/mui-org/material-ui/issues/13013
Wrap with form fixed this issue for me. It should be like this:
<form autoComplete="off">
<TextField ... />
</form>
I would like to know how to update inputProps in textfield based off another prop,
<TextField
name={props.name}
value={props.vals}
inputProps={{autocapitalize:"characters", textTransform:"uppercase"}}
onChange={props.getStuff}
/>
I also have a prop that is designed to check if the textfield should display everything in all caps or not !
setAllCapital = true
I would like it so if setAllCapital is true the input props is given the autocap and text transform, but if its false then it is not given anything.
What is the convention/best way to do this ?
Thank you
You can pass the input props based on condition
<TextField
name={props.name}
value={props.vals}
inputProps={props.setAllCapital ? {autocapitalize:"characters", textTransform:"uppercase"} : "whatever value you want"}
onChange={props.getStuff}
/>
Now whenever your setAllCapital is false, you won't be sending autocap and textTransform to TextField.
Edit:
And a much more concise way would be
<TextField
name={props.name}
value={props.vals}
inputProps={props.setAllCapital && {autocapitalize:"characters", textTransform:"uppercase"}}
onChange={props.getStuff}
/>
Now your input props will be undefined if setAllCapital is false
One of the ways is to check the condition inline and pass the props. If props.setAllCapital is false then nothing gets passed to inputProps.
<TextField
name={props.name}
value={props.vals}
inputProps={props.setAllCapital ? {autocapitalize:"characters",
textTransform:"uppercase"}:undefined}
onChange={props.getStuff}
/>
By default if nothing was picked label will be placed as placeholder(like in screenshot bellow).
<KeyboardDatePicker InputAdornmentProps={{
position: 'start'
}}
/>
Is there a way to shrink the label and keep placeholder empty? I tried adding InputAdornmentProps={{position: 'start'}} and it helped(in a screenshot bellow) except I do not need the icon to be at start, I need it to keep as it is, on right.
Is there a way to achieve it? I am using KeyboardDatePicker from https://material-ui-pickers.dev/api/KeyboardDatePicker
Any prop not recognized by the pickers and their sub-components are passed down to material-ui TextField component.
So what you need to do is simply add the required props from the TextField component to shrink the label. The result would look like this:
<KeyboardDatePicker InputLabelProps={{ shrink: true }} />