Wrong place for cursor in Input with autofocus set to true

[jae-huh]

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Cursor is shown at the end of the given value when autoFocus is set to true with a value.

Current Behavior

Cursor blinks at the start of the given value

Steps to Reproduce

Link: https://codesandbox.io/s/m3339635nj

1. Open the link in browsers other than Chrome.
2. Toggle the Input component by clicking the button.
3. See where the cursor blinks in edit mode.

Context

I'm currently working on a feature that lets users to edit their messages (similar to the example provided) using Material UI's TextField component.

Your Environment

Tech	Version
Material-UI	v1.4.3
React	v16.4.2

[oliviertassinari]

@jae-huh Same behavior with a native input element.

https://codesandbox.io/s/38vxvq0kwm

You need to get a reference on the input with the inputRef property and to change the caret position with a DOM API.

x.setSelectionRange(0, 0);

[jae-huh]

@oliviertassinari If you compare your sandbox with mine on Safari, the difference is that the Material UI Input cursor goes to the start of the input field, and the cursor in the native input goes to the end of the field.

With Material UI Input component:

Native input element:

The behaviour I expect is that the Material UI Input component should have the cursor at the end of the field like the native behaviour.

[oliviertassinari]

Oh, my bad. It sounds like an issue with React. We don't have any specific handling for the focus logic.

[kurbatov]

I would like to draw an attention to this issue one more time because now in 4.9.4 it still exists and stil breaks the expectations (for multiline textfield).

Is it possible to make the Material UI multiline TextField component to have the cursor at the end after autofocus not writing ref-boilerplate for every single one of the them?

Update: it reproduces for multiline textfield.

[benkburke]

Still seeing this issue here as well. When using autofocus with multiline option for TextField, the cursor is placed at the beginning of the input as opposed to the end. Is there a fix for this planned?

[GregdTd]

Still having the issue, any plans on opening it again ?

[imransilvake]

Still having this issue. any fix?

[oliviertassinari]

It might be related to #23096.

[GregdTd]

Instead of using ref, I used the onFocus to handle the selectionRange of the carret.

    const handleFocus = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        const lengthOfInput = event.target.value.length;
        return event.target.setSelectionRange(lengthOfInput, lengthOfInput);
    };

[imransilvake]

I found a solution and it is working fine for me.

<TextField
	variant="outlined"
	type="text"
	id="field-comment"
	name="comment"
	label="Label"
	placeholder="Placeholder"
	onChange={(event) => setValue(event.target.value)}
	inputRef={(input) => input && input.focus()}
	onFocus={(e) =>
		e.currentTarget.setSelectionRange(
		e.currentTarget.value.length,
		e.currentTarget.value.length
	)}
	multiline
	rows={4}
	value={value}
	className={classes.sCommentTextField}
/>