fix(core): prevent timezone dialog from closing parent dialogs

Stop mousedown events from propagating outside the DialogTimeZone
component. This dialog renders via portal outside the DateTimeInput's
popover DOM tree, so clicks inside it were being detected as "outside"
the date picker by useClickOutsideEvent, closing the entire dialog stack.

Fixes the issue where clicking anywhere in the timezone selector dialog
(opened from Schedule Publishing) would close all parent dialogs.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: annez

packages/sanity/src/core/components/timeZone/DialogTimeZone.tsx

@@ -1,6 +1,6 @@
 import {SearchIcon} from '@sanity/icons'
 import {Autocomplete, Card, Flex, Inline, Stack, Text, type Theme} from '@sanity/ui'
-import {useCallback, useMemo, useState} from 'react'
+import {type MouseEvent, useCallback, useMemo, useState} from 'react'
 import {css, styled} from 'styled-components'
 
 import {Dialog} from '../../../ui-components'
@@ -96,76 +96,87 @@ const DialogTimeZone = (props: DialogTimeZoneProps) => {
     return `${option.alternativeName} (${option.namePretty})`
   }, [])
 
+  // Stop mousedown events from propagating to parent click-outside handlers.
+  // This dialog renders via portal outside the DateTimeInput's popover DOM tree,
+  // so clicks inside it would otherwise be detected as "outside" the date picker
+  // and close the entire dialog stack.
+  const handleMouseDown = useCallback((e: MouseEvent) => {
+    e.stopPropagation()
+  }, [])
+
   return (
-    <Dialog
-      footer={{
-        confirmButton: {
-          text: 'Update time zone',
-          disabled: !isDirty || !selectedTz,
-          onClick: handleTimeZoneUpdate,
-          tone: 'primary',
-        },
-      }}
-      header="Select time zone"
-      id="time-zone"
-      onClose={onClose}
-      width={1}
-    >
-      <Stack padding={4} space={5}>
-        <Text size={1}>{timeZoneScopeTypeToLabel[timeZoneScope.type]}</Text>
-        <Stack space={3}>
-          <Flex align="center" justify="space-between">
-            <Inline space={2}>
-              <Text size={1} weight="semibold">
-                {t('time-zone.time-zone')}
-              </Text>
-              {isLocalTzSelected && (
-                <Text muted size={1}>
-                  {t('time-zone.local-time')}
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div onMouseDown={handleMouseDown}>
+      <Dialog
+        footer={{
+          confirmButton: {
+            text: 'Update time zone',
+            disabled: !isDirty || !selectedTz,
+            onClick: handleTimeZoneUpdate,
+            tone: 'primary',
+          },
+        }}
+        header="Select time zone"
+        id="time-zone"
+        onClose={onClose}
+        width={1}
+      >
+        <Stack padding={4} space={5}>
+          <Text size={1}>{timeZoneScopeTypeToLabel[timeZoneScope.type]}</Text>
+          <Stack space={3}>
+            <Flex align="center" justify="space-between">
+              <Inline space={2}>
+                <Text size={1} weight="semibold">
+                  {t('time-zone.time-zone')}
+                </Text>
+                {isLocalTzSelected && (
+                  <Text muted size={1}>
+                    {t('time-zone.local-time')}
+                  </Text>
+                )}
+              </Inline>
+              {!isLocalTzSelected && (
+                <Text size={1} weight="medium">
+                  <a onClick={handleTimeZoneSelectLocal} style={{cursor: 'pointer'}}>
+                    {t('time-zone.action.select-local-time-zone')}
+                  </a>
                 </Text>
               )}
-            </Inline>
-            {!isLocalTzSelected && (
-              <Text size={1} weight="medium">
-                <a onClick={handleTimeZoneSelectLocal} style={{cursor: 'pointer'}}>
-                  {t('time-zone.action.select-local-time-zone')}
-                </a>
-              </Text>
-            )}
-          </Flex>
-
-          <Autocomplete
-            fontSize={2}
-            icon={SearchIcon}
-            id="timezone"
-            onChange={handleTimeZoneChange}
-            openButton
-            options={allTimeZones}
-            padding={4}
-            filterOption={(query: string, option: NormalizedTimeZone) => {
-              if (query === '') return true
-              return `${option.city} (GMT
+            </Flex>
+
+            <Autocomplete
+              fontSize={2}
+              icon={SearchIcon}
+              id="timezone"
+              onChange={handleTimeZoneChange}
+              openButton
+              options={allTimeZones}
+              padding={4}
+              filterOption={(query: string, option: NormalizedTimeZone) => {
+                if (query === '') return true
+                return `${option.city} (GMT
             ${option.offset}) ${option.alternativeName}`
-                ?.toLowerCase()
-                ?.includes(query?.toLowerCase())
-            }}
-            placeholder={t('time-zone.action.search-for-timezone-placeholder')}
-            popover={{
-              boundaryElement:
-                timeZoneScope.type === 'input'
-                  ? (document.querySelector('#document-panel-scroller') as HTMLElement)
-                  : (document.querySelector('body') as HTMLElement),
-              constrainSize: true,
-              placement: 'bottom-start',
-            }}
-            renderOption={renderOption}
-            renderValue={renderValue}
-            tabIndex={-1}
-            value={selectedTz?.value}
-          />
+                  ?.toLowerCase()
+                  ?.includes(query?.toLowerCase())
+              }}
+              placeholder={t('time-zone.action.search-for-timezone-placeholder')}
+              popover={{
+                boundaryElement:
+                  timeZoneScope.type === 'input'
+                    ? (document.querySelector('#document-panel-scroller') as HTMLElement)
+                    : (document.querySelector('body') as HTMLElement),
+                constrainSize: true,
+                placement: 'bottom-start',
+              }}
+              renderOption={renderOption}
+              renderValue={renderValue}
+              tabIndex={-1}
+              value={selectedTz?.value}
+            />
+          </Stack>
         </Stack>
-      </Stack>
-    </Dialog>
+      </Dialog>
+    </div>
   )
 }