Clicking an image picker in a dialog closes it

[leolabs]

Describe the bug

I've set up a gallery that contains a list of images. When I edit an existing image and click anywhere on the image, the dialog closes. This happens both with normal clicks and right-clicks, and already happens when you press one of the mouse buttons, so it seems like something is listening to mousedown or pointerdown events.

This happens consistently on Safari and semi-consistently on Chrome.

The video below demonstrates the issue in Safari:

CleanShot.2024-12-29.at.18.53.27.mp4

To Reproduce

Here's my gallery schema. I've simplified it a bit for reproduction purposes:

import {defineField, defineType} from 'sanity'

export const galleryImageType = defineType({
  type: 'image',
  name: 'galleryImage',
  title: 'Image',
  fields: [
    {type: 'internationalizedArrayString', name: 'title', title: 'Title'},
  ],
  preview: {
    select: {
      title: 'title',
      media: 'asset',
    },
    prepare: (value) => {
      return {
        title: value.title[0].value ?? 'undefined',
        media: value.media,
      }
    },
  },
})

export const galleryPanoramaType = defineType({
  type: 'image',
  name: 'galleryPanorama',
  title: 'Panorama',
  fields: [
    {type: 'internationalizedArrayString', name: 'title', title: 'Title'},
  ],
  preview: {
    select: {
      title: 'title',
      media: 'asset',
    },
    prepare: (value) => {
      return {
        title: value.title[0].value ?? 'undefined',
        media: value.media,
      }
    },
  },
})

export const galleryType = defineType({
  name: 'gallery',
  title: 'Gallery',
  type: 'document',
  preview: {
    select: {
      title: 'title',
      subtitle: 'images',
      media: 'hero',
    },
    prepare: (value) => {
      return {
        title: value.title[0].value ?? 'undefined',
        subtitle: value.subtitle && value.subtitle.length + ' images',
        media: value.media,
      }
    },
  },
  fields: [
    defineField({
      name: 'title',
      type: 'internationalizedArrayString',
      validation: (r) => r.required(),
    }),
    defineField({
      name: 'slug',
      type: 'slug',
      options: {source: 'title[0].value'},
      validation: (r) => r.required(),
    }),
    defineField({
      name: 'hero',
      title: 'Hero Image',
      type: 'image',
      options: {
        hotspot: true,
      },
      validation: (r) => r.required(),
    }),
    defineField({
      name: 'images',
      title: 'Images',
      type: 'array',
      validation: (r) => r.required(),
      of: [{type: 'galleryImage'}, {type: 'galleryPanorama'}],
    }),
  ],
})

And here's my config. I'm using the internationalized-array plugin to localize fields:

import {defineConfig} from 'sanity'
import {structureTool} from 'sanity/structure'
import {visionTool} from '@sanity/vision'
import {schemaTypes} from './schemaTypes'

import {internationalizedArray} from 'sanity-plugin-internationalized-array'

export default defineConfig({
  name: 'default',
  title: '3Dfine',

  projectId: 'nlvbabp5',
  dataset: 'production',

  plugins: [
    structureTool(),
    visionTool(),
    internationalizedArray({
      languages: [
        {id: 'en', title: 'English'},
        {id: 'de', title: 'German'},
      ],
      defaultLanguages: ['en'],
      fieldTypes: ['string'],
    }),
  ],

  schema: {
    types: schemaTypes,
  },
})

Expected behavior

When I click anywhere on the uploaded image, the dialog should stay open so I can take action.

Which versions of Sanity are you using?

@sanity/cli (global)          3.68.3 (up to date)
@sanity/eslint-config-studio   5.0.1 (up to date)
@sanity/vision                3.68.3 (up to date)
sanity                        3.68.3 (up to date)

What operating system are you using?

macOS Sequoia 15.2, on Safari.

Which versions of Node.js / npm are you running?

10.9.0
v22.12.0

[ShiftaDeband]

May be similar to #7547?

[leolabs]

It sounds like a similar issue, though it didn't seem to be fixed in 3.68.0 on my end, unfortunately.