fix ssr prop mismatch (#4682)

* fix ssr prop mismatch * added changeset
ianstormtaylor · Nov 22, 2021 · e538065 · e538065
1 parent 2523dc4
commit e538065
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/.changeset/strong-jeans-train.md b/.changeset/strong-jeans-train.md
@@ -0,0 +1,12 @@
+---
+'slate-react': minor
+---
+
+Support SSR for autoCorrect, spellCheck and autoCapitalize.
+Fixes prop mismatch between server and client.
+Removes the need to add
+<Editable
+  spellCheck={false}
+  autoCorrect="false"
+  autoCapitalize="false"
+/>
diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
@@ -24,6 +24,7 @@ import {
   IS_FIREFOX_LEGACY,
   IS_QQBROWSER,
   IS_SAFARI,
+  CAN_USE_DOM,
 } from '../utils/environment'
 import { ReactEditor } from '..'
 import { ReadOnlyContext } from '../hooks/use-read-only'
@@ -579,12 +580,23 @@ export const Editable = (props: EditableProps) => {
           {...attributes}
           // COMPAT: Certain browsers don't support the `beforeinput` event, so we'd
           // have to use hacks to make these replacement-based features work.
-          spellCheck={!HAS_BEFORE_INPUT_SUPPORT ? false : attributes.spellCheck}
+          // For SSR situations HAS_BEFORE_INPUT_SUPPORT is false and results in prop
+          // mismatch warning app moves to browser. Pass-through consumer props when
+          // not CAN_USE_DOM (SSR) and default to falsy value
+          spellCheck={
+            HAS_BEFORE_INPUT_SUPPORT || !CAN_USE_DOM
+              ? attributes.spellCheck
+              : false
+          }
           autoCorrect={
-            !HAS_BEFORE_INPUT_SUPPORT ? 'false' : attributes.autoCorrect
+            HAS_BEFORE_INPUT_SUPPORT || !CAN_USE_DOM
+              ? attributes.autoCorrect
+              : 'false'
           }
           autoCapitalize={
-            !HAS_BEFORE_INPUT_SUPPORT ? 'false' : attributes.autoCapitalize
+            HAS_BEFORE_INPUT_SUPPORT || !CAN_USE_DOM
+              ? attributes.autoCapitalize
+              : 'false'
           }
           data-slate-editor
           data-slate-node="value"