Apply placeholder delay only on Android devices (#5564)

ianstormtaylor · Nov 22, 2023 · 9aa573e · 9aa573e
1 parent 9db2bd2
commit 9aa573e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/gold-bottles-collect.md b/.changeset/gold-bottles-collect.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Apply 300ms placeholder delay only on Android devices
diff --git a/packages/slate-react/src/components/leaf.tsx b/packages/slate-react/src/components/leaf.tsx
@@ -16,7 +16,11 @@ import {
 } from '../utils/weak-maps'
 import { RenderLeafProps, RenderPlaceholderProps } from './editable'
 import { useSlateStatic } from '../hooks/use-slate-static'
-import { IS_WEBKIT } from '../utils/environment'
+import { IS_WEBKIT, IS_ANDROID } from '../utils/environment'
+
+// Delay the placeholder on Android to prevent the keyboard from closing.
+// (https://github.com/ianstormtaylor/slate/pull/5368)
+const PLACEHOLDER_DELAY = IS_ANDROID ? 300 : 0
 
 function disconnectPlaceholderResizeObserver(
   placeholderResizeObserver: MutableRefObject<ResizeObserver | null>,
@@ -104,7 +108,7 @@ const Leaf = (props: {
         showPlaceholderTimeoutRef.current = setTimeout(() => {
           setShowPlaceholder(true)
           showPlaceholderTimeoutRef.current = null
-        }, 300)
+        }, PLACEHOLDER_DELAY)
       }
     } else {
       clearTimeoutRef(showPlaceholderTimeoutRef)