While editing the description cursor starts from first place instead of last

[PiyushChandra17]

p5.js version

2.9.2

What is your operating system?

Mac OS

Web browser and version

Chrome and 117.0.5938.132

Actual Behavior

While editing the description (optional) text cursor starts from the beginning instead of last position

edit.mov

Expected Behavior

While editing the description text cursor should start from the last position, probably same as when we try editing collection name

Steps to reproduce

Steps:

1. Open the editor web app
2. Click on hello, username > my collections > create collection
3. Fill the description > create collection
4. Try editing the description
5. Verify that text cursor starts from first position

[lindapaiste]

While editing the description text cursor should start from the last position, probably same as when we try editing collection name

This is odd because both elements use the same EditableInput component. We are just calling focus() and not explicitly setting the cursor position in either case. One is an input and the other is a textarea, so I guess that makes a difference?

This seems to be browser/OS dependent. I get the cursor at the end in Chrome on Windows but the cursor is at the start in Chrome on Mac OS.

It is possible to explicitly set the cursor position so that we can force it to the end.
https://stackoverflow.com/questions/34968174/set-text-cursor-position-in-a-textarea
https://www.tutorialspoint.com/how-to-place-cursor-position-at-end-of-text-in-text-input-field-using-javascript

p5.js-web-editor/client/modules/IDE/components/EditableInput.jsx

Lines 29 to 33 in c448094

	React.useEffect(() => {
	if (isEditing) {
	inputRef.current?.focus();
	}
	}, [isEditing]);

[apsinghdev]

While editing the description text cursor should start from the last position, probably same as when we try editing collection name

This is odd because both elements use the same EditableInput component. We are just calling focus() and not explicitly setting the cursor position in either case. One is an input and the other is a textarea, so I guess that makes a difference?

This seems to be browser/OS dependent. I get the cursor at the end in Chrome on Windows but the cursor is at the start in Chrome on Mac OS.

It is possible to explicitly set the cursor position so that we can force it to the end. https://stackoverflow.com/questions/34968174/set-text-cursor-position-in-a-textarea https://www.tutorialspoint.com/how-to-place-cursor-position-at-end-of-text-in-text-input-field-using-javascript

p5.js-web-editor/client/modules/IDE/components/EditableInput.jsx

Lines 29 to 33 in c448094

	React.useEffect(() => {
	if (isEditing) {
	inputRef.current?.focus();
	}
	}, [isEditing]);

I think this can be solved using setSelectionRange method