Material UI Textfield not starting from end of field

Question

I have an editable field - when state isEditing I render a Textfield and when !isEditing a disabled Textfield is shown.

When the Textfield is clicked then a form is rendered so the user can edit the field.

The issue I'm having is that when the editable Textfield is rendered the cursor begins from the beginning of the Textfield.

How can I make it so that when the editable Textfield is first rendered then the cursor will begin at the end of the field?

I've tried adding autoFocus however I am still having the same issue.

if (!isEditing) {
    return (
            <TextField
                className={classes.text}
                disabled
                multiline={multiline}
                value={value}
                name={name}
                onClick={handleEditClick}
                onMouseEnter={handleMouseOver}
                onMouseLeave={handleMouseOver}
                InputProps={{
                    classes: {
                        disabled: classes.disabled,
                        root: classes[variant]
                    }
                }}
            />

    )
}

if (isEditing) {
    return (
        <form onSubmit={submitEdit}>
            <TextField
                autoFocus
                className={classes.text}
                value={tempEditingValue}
                onChange={handleEditChange}
                multiline={multiline}
                name={name}
                InputProps={{
                    classes: {
                        disabled: classes.disabled,
                        root: classes[variant]
                    }
                }}
            />
            <div>
            <Button className={classes.btn} variant='contained' color='secondary' type='submit' >Save</Button>
            <Button className={classes.btn} variant='contained' color='primary' onClick={resetTempEditingValue}>Cancel</Button>
            </div>
        </form>
    )

You don't have to create an if-else statement here. just set `disable={!isEditing}` — NearHuscarl, Oct 25 '20 at 00:11

score 2 · Accepted Answer · answered Oct 25 '20 at 00:03

2

Try add to TextField:

onFocus={function(e) {
    var val = e.target.value;
    e.target.value = '';
    e.target.value = val;
}}

see also React autoFocus sets cursor to beginning of input value

answered Oct 25 '20 at 00:03

Damiano Amici

36
2

Material UI Textfield not starting from end of field

1 Answers1