[field] PT: don't setFocus if item removed

sanity-io · Oct 6, 2020 · 8ab4238 · 8ab4238
1 parent 40e5114
commit 8ab4238
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/packages/@sanity/field/src/types/portableText/diff/components/Annotation.tsx b/packages/@sanity/field/src/types/portableText/diff/components/Annotation.tsx
@@ -77,6 +77,7 @@ function AnnnotationWithDiff({
   const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
   const color = useDiffAnnotationColor(diff, [])
   const style = color ? {background: color.background, color: color.text} : {}
+  const isRemoved = diff.action === 'removed'
   const className = classNames(
     styles.root,
     styles.isChanged,
@@ -106,8 +107,11 @@ function AnnnotationWithDiff({
     event => {
       event.stopPropagation()
       setOpen(true)
-      onSetFocus(annotationPath) // Go to span first
-      setTimeout(() => onSetFocus(myPath), 10) // Open edit object interface
+      if (!isRemoved) {
+        event.preventDefault()
+        onSetFocus(annotationPath) // Go to span first
+        setTimeout(() => onSetFocus(myPath), 10) // Open edit object interface
+      }
     },
     [annotationPath]
   )

diff --git a/packages/@sanity/field/src/types/portableText/diff/components/InlineObject.tsx b/packages/@sanity/field/src/types/portableText/diff/components/InlineObject.tsx
@@ -76,6 +76,7 @@ function InlineObjectWithDiff({
   const className = classNames(styles.root, diff.action === 'removed' && styles.removed)
   const [open, setOpen] = useState(false)
   const emptyObject = object && isEmptyObject(object)
+  const isRemoved = diff.action === 'removed'
   const prefix = fullPath.slice(
     0,
     fullPath.findIndex(seg => isKeySegment(seg) && seg._key === object._key)
@@ -101,7 +102,11 @@ function InlineObjectWithDiff({
     event => {
       event.stopPropagation()
       setOpen(true)
-      onSetFocus(focusPath)
+      if (!isRemoved) {
+        onSetFocus(focusPath)
+        return
+      }
+      event.preventDefault()
     },
     [focusPath]
   )

diff --git a/packages/@sanity/field/src/types/portableText/diff/components/Text.tsx b/packages/@sanity/field/src/types/portableText/diff/components/Text.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import {isKeySegment, Path} from '@sanity/types'
-import React, {useCallback} from 'react'
+import React, {SyntheticEvent, useCallback} from 'react'
 import {ConnectorContext} from '@sanity/base/lib/change-indicators'
 import {startCase} from 'lodash'
 import {DiffCard, DiffContext, StringDiff, StringDiffSegment} from '../../../../diff'
@@ -28,6 +28,7 @@ export function Text({
   const {path: fullPath} = React.useContext(DiffContext)
   const spanSegment = path.slice(-2, 1)[0]
   const className = classNames(styles.root)
+  const isRemoved = diff && diff.action === 'removed'
   const prefix = fullPath.slice(
     0,
     fullPath.findIndex(
@@ -47,9 +48,16 @@ export function Text({
       </DiffCard>
     ) : null
 
-  const handleClick = useCallback(() => {
-    onSetFocus(focusPath)
-  }, [focusPath])
+  const handleClick = useCallback(
+    (event: SyntheticEvent) => {
+      if (!isRemoved) {
+        onSetFocus(focusPath)
+        return
+      }
+      event.preventDefault()
+    },
+    [focusPath]
+  )
   return (
     <span {...restProps} className={className} onClick={handleClick}>
       <span className={styles.previewContainer}>{diffCard ? diffCard : children}</span>