CODEWITHSUNDEEP
reactjsmaterial-ui
Sined4ik
Sined4ik

Reputation: 119

dynamic label width textfield outlined material ui react

I have a textfield variant outlined, and there I have a dynamic label, the problem is that when it changes the top line in width remains the same as the first time

<TextField
    id="debtorIin"
    name="debtorIin"
    label={debtorType === "pvt" ? "Ф.И.О.:" : "Наименование организации:"}
    disabled={debtorFullInfo && true}
    className={classes.textField}
    value={debtorIin}
    helperText={touched.debtorIin ? errors.debtorIin : ""}
    error={touched.debtorIin && Boolean(errors.debtorIin)}
    onChange={change.bind(null, "debtorIin")}
    margin="normal"
    variant="outlined"
/>

a busy cat
(source: imggmi.com)

two muppets
(source: imggmi.com)

Upvotes: 2

Views: 3682

Answers (1)

Gary
Gary

Reputation: 61

I think it happens because it won't recalculate the width on property change, you can solve that by creating two different TextField for it.

First, you need one that contains all the common props.

const MyTexField = ({ label, ...props }) => (
<TextField
    id="debtorIin"
    name="debtorIin"
    label={props.label}
    disabled={props.debtorFullInfo && true}
    className={props.classes.textField}
    value={props.debtorIin}
    helperText={props.touched.debtorIin ? props.errors.debtorIin : ""}
    error={props.touched.debtorIin && Boolean(props.errors.debtorIin)}
    onChange={change.bind(null, "debtorIin")}
    margin="normal"
    variant="outlined"
/>
);

Then, you can use that component:

<MyTextField label="Ф.И.О.:" {...props} />

Upvotes: 1

Related Questions