Fixes text on mobile (iOS)

components/canvas/shape.tsx

@@ -27,7 +27,11 @@ function Shape({ id, isSelecting, parentPoint }: ShapeProps) {
 
   useEffect(() => {
     if (isEditing) {
-      setTimeout(() => rFocusable.current?.focus(), 0)
+      setTimeout(() => {
+        const elm = rFocusable.current
+        if (!elm) return
+        elm.focus()
+      }, 0)
     }
   }, [isEditing])
 

hooks/useShapeEvents.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, useCallback, useRef } from 'react'
+import React, { MutableRefObject, useCallback, useRef } from 'react'
 import state from 'state'
 import inputs from 'state/inputs'
 
@@ -76,11 +76,21 @@ export default function useShapeEvents(
     [id]
   )
 
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
+    e.preventDefault()
+  }, [])
+
+  const handleTouchEnd = useCallback((e: React.TouchEvent) => {
+    e.preventDefault()
+  }, [])
+
   return {
     onPointerDown: handlePointerDown,
     onPointerUp: handlePointerUp,
     onPointerEnter: handlePointerEnter,
     onPointerMove: handlePointerMove,
     onPointerLeave: handlePointerLeave,
+    onTouchStart: handleTouchStart,
+    onTouchEnd: handleTouchEnd,
   }
 }

lib/shape-utils/text.tsx

@@ -1,4 +1,4 @@
-import { uniqueId } from 'utils/utils'
+import { uniqueId, isMobile } from 'utils/utils'
 import vec from 'utils/vec'
 import { TextShape, ShapeType, FontSize, SizeStyle } from 'types'
 import { registerShapeUtils } from './index'
@@ -118,6 +118,7 @@ const text = registerShapeUtils<TextShape>({
             autoComplete="false"
             autoCapitalize="false"
             autoCorrect="false"
+            autoFocus={isMobile() ? true : false}
             onFocus={handleFocus}
             onBlur={handleBlur}
             onKeyDown={handleKeyDown}
@@ -236,7 +237,6 @@ const StyledText = styled('div', {
   pointerEvents: 'none',
   userSelect: 'none',
   display: 'inline-block',
-  position: 'relative',
 })
 
 const StyledTextArea = styled('textarea', {
@@ -254,4 +254,6 @@ const StyledTextArea = styled('textarea', {
   pointerEvents: 'all',
   backfaceVisibility: 'hidden',
   display: 'inline-block',
+  userSelect: 'text',
+  WebkitUserSelect: 'text',
 })

state/state.ts

@@ -114,7 +114,7 @@ const initialData: Data = {
 const state = createState({
   data: initialData,
   on: {
-    UNMOUNTED: [{ unless: 'isReadOnly', do: 'forceSave' }, { to: 'loading' }],
+    UNMOUNTED: { to: 'loading' },
   },
   initial: 'loading',
   states: {