fix(form): open hotspot editor using focusPath (#5160)

packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx

@@ -1,6 +1,15 @@
 import React, {MouseEventHandler, ReactNode, useCallback, useEffect, useState} from 'react'
 import {EllipsisVerticalIcon, CropIcon} from '@sanity/icons'
-import {Button, Inline, Menu, Popover, useClickOutside, useGlobalKeyDown} from '@sanity/ui'
+import {
+  Button,
+  Inline,
+  Menu,
+  Popover,
+  Text,
+  Tooltip,
+  useClickOutside,
+  useGlobalKeyDown,
+} from '@sanity/ui'
 import styled from 'styled-components'
 
 export const MenuActionsWrapper = styled(Inline)`
@@ -82,14 +91,16 @@ export function ImageActionsMenu(props: ImageActionsMenuProps) {
   return (
     <MenuActionsWrapper data-buttons space={1} padding={2}>
       {showEdit && (
-        <Button
-          aria-label="Open image edit dialog"
-          data-testid="options-menu-edit-details"
-          icon={CropIcon}
-          mode="ghost"
-          onClick={onEdit}
-          ref={setHotspotButtonElement}
-        />
+        <Tooltip content={<Text size={1}>Crop image</Text>} padding={2}>
+          <Button
+            aria-label="Open image edit dialog"
+            data-testid="options-menu-edit-details"
+            icon={CropIcon}
+            mode="ghost"
+            onClick={onEdit}
+            ref={setHotspotButtonElement}
+          />
+        </Tooltip>
       )}
       {/* Using a customized Popover instead of MenuButton because a MenuButton will close on click
      and break replacing an uploaded file. */}

packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx

@@ -306,13 +306,11 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
   }
 
   handleOpenDialog = () => {
-    const {onFieldOpen} = this.props
-    onFieldOpen('hotspot')
+    this.props.onPathFocus(['hotspot'])
   }
 
   handleCloseDialog = () => {
-    const {onFieldClose} = this.props
-    onFieldClose('hotspot')
+    this.props.onPathFocus([])
 
     // Set focus on hotspot button in `ImageActionsMenu` when closing the dialog
     this.state.hotspotButtonElement?.focus()
@@ -787,6 +785,7 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
 
   render() {
     const {
+      focusPath,
       members,
       renderAnnotation,
       renderBlock,
@@ -851,7 +850,8 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
           //@ts-expect-error all possible cases should be covered
           return <>Unknown member kind: ${member.kind}</>
         })}
-        {hotspotField?.open && (
+
+        {hotspotField && focusPath[0] === 'hotspot' && (
           <FormInput
             {...this.props}
             absolutePath={hotspotField.field.path}