diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 0e33c3f431..87889a724f 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -4421,6 +4421,11 @@ class App extends React.Component { element, excalidrawContainer: this.excalidrawContainerRef.current, app: this, + // when text is selected, it's hard (at least on iOS) to re-position the + // caret (i.e. deselect). There's not much use for always selecting + // the text on edit anyway (and users can select-all from contextmenu + // if needed) + autoSelect: !this.device.isTouchScreen, }); // deselect all other elements when inserting text this.deselectElements(); diff --git a/packages/excalidraw/element/textWysiwyg.tsx b/packages/excalidraw/element/textWysiwyg.tsx index b0cb497d92..5dd438d66f 100644 --- a/packages/excalidraw/element/textWysiwyg.tsx +++ b/packages/excalidraw/element/textWysiwyg.tsx @@ -77,6 +77,7 @@ export const textWysiwyg = ({ canvas, excalidrawContainer, app, + autoSelect = true, }: { id: ExcalidrawElement["id"]; /** @@ -92,6 +93,7 @@ export const textWysiwyg = ({ canvas: HTMLCanvasElement; excalidrawContainer: HTMLDivElement | null; app: App; + autoSelect?: boolean; }) => { const textPropertiesUpdated = ( updatedTextElement: ExcalidrawTextElement, @@ -657,9 +659,11 @@ export const textWysiwyg = ({ let isDestroyed = false; - // select on init (focusing is done separately inside the bindBlurEvent() - // because we need it to happen *after* the blur event from `pointerdown`) - editable.select(); + if (autoSelect) { + // select on init (focusing is done separately inside the bindBlurEvent() + // because we need it to happen *after* the blur event from `pointerdown`) + editable.select(); + } bindBlurEvent(); // reposition wysiwyg in case of canvas is resized. Using ResizeObserver