diff --git a/components/canvas/shape.tsx b/components/canvas/shape.tsx index 76b00c716..15a4fe17d 100644 --- a/components/canvas/shape.tsx +++ b/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]) diff --git a/hooks/useShapeEvents.ts b/hooks/useShapeEvents.ts index d5b55aebe..57d57c022 100644 --- a/hooks/useShapeEvents.ts +++ b/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, } } diff --git a/lib/shape-utils/text.tsx b/lib/shape-utils/text.tsx index 799812c3f..993d4bb29 100644 --- a/lib/shape-utils/text.tsx +++ b/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({ 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', }) diff --git a/state/state.ts b/state/state.ts index 6e728bdda..b02e44f22 100644 --- a/state/state.ts +++ b/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: {