@oneuptime/common 12.0.7 → 12.0.9

package/UI/Components/LogsViewer/components/LogTimeRangePicker.tsx

@@ -1,233 +1,28 @@
-import React, {
-  FunctionComponent,
-  ReactElement,
-  useState,
-  useRef,
-  useEffect,
-  useCallback,
-} from "react";
-import Icon from "../../Icon/Icon";
-import IconProp from "../../../../Types/Icon/IconProp";
+import React, { FunctionComponent, ReactElement } from "react";
 import RangeStartAndEndDateTime from "../../../../Types/Time/RangeStartAndEndDateTime";
-import TimeRange from "../../../../Types/Time/TimeRange";
-import InBetween from "../../../../Types/BaseDatabase/InBetween";
-import StartAndEndDate, {
-  StartAndEndDateType,
-} from "../../Date/StartAndEndDate";
-import {
-  DropdownHorizontalAlignment,
-  getDropdownAlignmentClassName,
-  useDropdownHorizontalAlignment,
-} from "../../../Utils/DropdownAlignment";
+import TimeRangePickerDropdown from "../../Date/TimeRangePickerDropdown";
 
 export interface LogTimeRangePickerProps {
   value: RangeStartAndEndDateTime;
   onChange: (value: RangeStartAndEndDateTime) => void;
 }
 
-// Matches the Tailwind `w-72` on the dropdown below (18rem).
+// Matches the Tailwind `w-72` on the rendered dropdown (18rem).
 export const LOG_TIME_RANGE_DROPDOWN_WIDTH_IN_PX: number = 288;
 
-// Preset options to show in the dropdown (ordered for log investigation use)
-const PRESET_OPTIONS: Array<{ range: TimeRange; label: string }> = [
-  { range: TimeRange.PAST_FIVE_MINS, label: "Past 5 Minutes" },
-  { range: TimeRange.PAST_FIFTEEN_MINS, label: "Past 15 Minutes" },
-  { range: TimeRange.PAST_THIRTY_MINS, label: "Past 30 Minutes" },
-  { range: TimeRange.PAST_ONE_HOUR, label: "Past 1 Hour" },
-  { range: TimeRange.PAST_TWO_HOURS, label: "Past 2 Hours" },
-  { range: TimeRange.PAST_THREE_HOURS, label: "Past 3 Hours" },
-  { range: TimeRange.PAST_ONE_DAY, label: "Past 1 Day" },
-  { range: TimeRange.PAST_TWO_DAYS, label: "Past 2 Days" },
-  { range: TimeRange.PAST_ONE_WEEK, label: "Past 1 Week" },
-  { range: TimeRange.PAST_TWO_WEEKS, label: "Past 2 Weeks" },
-  { range: TimeRange.PAST_ONE_MONTH, label: "Past 1 Month" },
-  { range: TimeRange.PAST_THREE_MONTHS, label: "Past 3 Months" },
-];
-
-function formatDateShort(date: Date): string {
-  const month: string = date.toLocaleString("en-US", { month: "short" });
-  const day: number = date.getDate();
-  const hours: string = date.getHours().toString().padStart(2, "0");
-  const minutes: string = date.getMinutes().toString().padStart(2, "0");
-  return `${month} ${day}, ${hours}:${minutes}`;
-}
-
-function getButtonLabel(value: RangeStartAndEndDateTime): string {
-  if (value.range === TimeRange.CUSTOM && value.startAndEndDate) {
-    const start: string = formatDateShort(value.startAndEndDate.startValue);
-    const end: string = formatDateShort(value.startAndEndDate.endValue);
-    return `${start} – ${end}`;
-  }
-
-  const preset: { range: TimeRange; label: string } | undefined =
-    PRESET_OPTIONS.find((opt: { range: TimeRange; label: string }) => {
-      return opt.range === value.range;
-    });
-  return preset ? preset.label : value.range;
-}
+export const LOG_TIME_RANGE_PICKER_TEST_ID_PREFIX: string =
+  "log-time-range-picker";
 
 const LogTimeRangePicker: FunctionComponent<LogTimeRangePickerProps> = (
   props: LogTimeRangePickerProps,
 ): ReactElement => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [showCustom, setShowCustom] = useState<boolean>(
-    props.value.range === TimeRange.CUSTOM,
-  );
-  const containerRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
-    null!,
-  );
-  const buttonRef: React.RefObject<HTMLButtonElement> =
-    useRef<HTMLButtonElement>(null!);
-  const dropdownRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
-    null!,
-  );
-
-  const alignment: DropdownHorizontalAlignment = useDropdownHorizontalAlignment(
-    {
-      isOpen: isOpen,
-      anchorRef: buttonRef,
-      dropdownRef: dropdownRef,
-      dropdownWidthInPx: LOG_TIME_RANGE_DROPDOWN_WIDTH_IN_PX,
-    },
-  );
-
-  // Close on click outside
-  useEffect(() => {
-    const handleClickOutside: (e: MouseEvent) => void = (
-      e: MouseEvent,
-    ): void => {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(e.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  // Sync showCustom when value changes externally (e.g., histogram drag)
-  useEffect(() => {
-    setShowCustom(props.value.range === TimeRange.CUSTOM);
-  }, [props.value.range]);
-
-  const handlePresetSelect: (range: TimeRange) => void = useCallback(
-    (range: TimeRange): void => {
-      props.onChange({ range });
-      setShowCustom(false);
-      setIsOpen(false);
-    },
-    [props],
-  );
-
-  const handleCustomDateChange: (dateRange: InBetween<Date> | null) => void =
-    useCallback(
-      (dateRange: InBetween<Date> | null): void => {
-        if (dateRange) {
-          props.onChange({
-            range: TimeRange.CUSTOM,
-            startAndEndDate: dateRange,
-          });
-        }
-      },
-      [props],
-    );
-
-  const buttonLabel: string = getButtonLabel(props.value);
-
   return (
-    <div ref={containerRef} className="relative">
-      <button
-        ref={buttonRef}
-        type="button"
-        data-testid="log-time-range-picker-button"
-        aria-haspopup="true"
-        aria-expanded={isOpen}
-        className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm transition-colors ${
-          isOpen
-            ? "border-indigo-300 bg-indigo-50 text-indigo-700"
-            : "border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50"
-        }`}
-        onClick={() => {
-          setIsOpen(!isOpen);
-        }}
-      >
-        <Icon icon={IconProp.Clock} className="h-3.5 w-3.5" />
-        <span>{buttonLabel}</span>
-        <Icon
-          icon={IconProp.ChevronDown}
-          className={`h-3 w-3 transition-transform ${isOpen ? "rotate-180" : ""}`}
-        />
-      </button>
-
-      {isOpen && (
-        <div
-          ref={dropdownRef}
-          data-testid="log-time-range-picker-dropdown"
-          data-align={alignment}
-          className={`absolute ${getDropdownAlignmentClassName(
-            alignment,
-          )} top-full z-50 mt-1 w-72 max-w-[calc(100vw-1rem)] rounded-lg border border-gray-200 bg-white shadow-lg`}
-        >
-          {/* Preset options */}
-          <div className="max-h-64 overflow-y-auto py-1">
-            {PRESET_OPTIONS.map(
-              (option: { range: TimeRange; label: string }) => {
-                const isActive: boolean = props.value.range === option.range;
-
-                return (
-                  <button
-                    key={option.range}
-                    type="button"
-                    className={`flex w-full items-center px-3 py-1.5 text-left text-sm transition-colors ${
-                      isActive
-                        ? "bg-indigo-50 font-medium text-indigo-700"
-                        : "text-gray-700 hover:bg-gray-50"
-                    }`}
-                    onClick={() => {
-                      handlePresetSelect(option.range);
-                    }}
-                  >
-                    {option.label}
-                  </button>
-                );
-              },
-            )}
-
-            {/* Custom option */}
-            <button
-              type="button"
-              className={`flex w-full items-center px-3 py-1.5 text-left text-sm transition-colors ${
-                props.value.range === TimeRange.CUSTOM
-                  ? "bg-indigo-50 font-medium text-indigo-700"
-                  : "text-gray-700 hover:bg-gray-50"
-              }`}
-              onClick={() => {
-                setShowCustom(true);
-              }}
-            >
-              Custom Range...
-            </button>
-          </div>
-
-          {/* Custom date inputs */}
-          {showCustom && (
-            <div className="border-t border-gray-100 p-3">
-              <StartAndEndDate
-                type={StartAndEndDateType.DateTime}
-                value={props.value.startAndEndDate}
-                hideTimeButtons={true}
-                onValueChanged={handleCustomDateChange}
-              />
-            </div>
-          )}
-        </div>
-      )}
-    </div>
+    <TimeRangePickerDropdown
+      value={props.value}
+      onChange={props.onChange}
+      dataTestIdPrefix={LOG_TIME_RANGE_PICKER_TEST_ID_PREFIX}
+      dropdownWidthInPx={LOG_TIME_RANGE_DROPDOWN_WIDTH_IN_PX}
+    />
   );
 };
 

package/UI/Components/LogsViewer/components/LogsAnalyticsView.tsx

@@ -53,6 +53,11 @@ interface AnalyticsTableRow {
 export interface LogsAnalyticsViewProps {
   timeRange: RangeStartAndEndDateTime;
   serviceIds?: Array<string> | undefined;
+  /*
+   * Base session scope from the host page (e.g. a session replay detail
+   * view). Forwarded verbatim so the charts cover the same rows as the list.
+   */
+  sessionIds?: Array<string> | undefined;
   appliedFacetFilters: Map<string, Set<string>>;
   logAttributes: Array<string>;
 }
@@ -362,6 +367,11 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
             props.serviceIds;
         }
 
+        if (props.sessionIds) {
+          (requestData as Record<string, unknown>)["sessionIds"] =
+            props.sessionIds;
+        }
+
         // Apply facet filters
         const severityValues: Set<string> | undefined =
           props.appliedFacetFilters.get("severityText");
@@ -435,6 +445,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
       topListLimit,
       props.timeRange,
       props.serviceIds,
+      props.sessionIds,
       props.appliedFacetFilters,
     ]);
 

package/UI/Components/LogsViewer/components/LogsTable.tsx

@@ -3,8 +3,12 @@ import Log from "../../../../Models/AnalyticsModels/Log";
 import Service from "../../../../Models/DatabaseModels/Service";
 import Dictionary from "../../../../Types/Dictionary";
 import OneUptimeDate from "../../../../Types/Date";
+import Route from "../../../../Types/API/Route";
+import URL from "../../../../Types/API/URL";
 import CopyTextButton from "../../CopyTextButton/CopyTextButton";
 import ComponentLoader from "../../ComponentLoader/ComponentLoader";
+import Link from "../../Link/Link";
+import Navigation from "../../../Utils/Navigation";
 import SeverityBadge from "./SeverityBadge";
 import { getSeverityTheme, SeverityTheme } from "./severityTheme";
 import SortOrder from "../../../../Types/BaseDatabase/SortOrder";
@@ -29,6 +33,20 @@ export interface LogsTableProps {
   onSortChange?: (field: LogsTableSortField) => void;
   selectedColumns?: Array<string> | undefined;
   focusedRowIndex?: number | undefined;
+  getTraceRoute?:
+    | ((traceId: string, log: Log) => Route | URL | undefined)
+    | undefined;
+  getSpanRoute?:
+    | ((spanId: string, log: Log) => Route | URL | undefined)
+    | undefined;
+  /*
+   * Async fallback for spanId-only rows: the sync builder needs the trace id
+   * the row doesn't carry, so the destination is resolved on click (one Span
+   * lookup) rather than per-row.
+   */
+  resolveSpanRoute?:
+    | ((spanId: string, log: Log) => Promise<Route | URL | undefined>)
+    | undefined;
 }
 
 export const resolveLogIdentifier: (log: Log, index: number) => string = (
@@ -117,6 +135,132 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
     return `${base} text-gray-300`;
   };
 
+  const openSpanLazily: (spanId: string, log: Log) => void = (
+    spanId: string,
+    log: Log,
+  ): void => {
+    const resolver:
+      | ((spanId: string, log: Log) => Promise<Route | URL | undefined>)
+      | undefined = props.resolveSpanRoute;
+
+    if (!resolver) {
+      return;
+    }
+
+    const navigateToSpan: () => Promise<void> = async (): Promise<void> => {
+      try {
+        const route: Route | URL | undefined = await resolver(spanId, log);
+
+        if (route) {
+          Navigation.navigate(route);
+        }
+      } catch {
+        // Resolution failed — leave the user where they are.
+      }
+    };
+
+    void navigateToSpan();
+  };
+
+  const linkClassName: string =
+    "font-mono text-indigo-600 hover:text-indigo-500 hover:underline";
+
+  /*
+   * Every rendered trace id is a link when the host supplied a route builder;
+   * plain text otherwise. Wrapped so a click follows the link without also
+   * toggling the row's expansion.
+   */
+  const renderTraceIdValue: (traceId: string, log: Log) => ReactElement = (
+    traceId: string,
+    log: Log,
+  ): ReactElement => {
+    const traceRoute: Route | URL | undefined = props.getTraceRoute
+      ? props.getTraceRoute(traceId, log)
+      : undefined;
+
+    if (!traceRoute) {
+      return (
+        <span className="font-mono" title={traceId}>
+          {traceId}
+        </span>
+      );
+    }
+
+    return (
+      <span
+        onClick={(event: React.MouseEvent<HTMLSpanElement>) => {
+          event.stopPropagation();
+        }}
+      >
+        <Link
+          to={traceRoute}
+          className={linkClassName}
+          title={`View trace ${traceId}`}
+        >
+          {traceId}
+        </Link>
+      </span>
+    );
+  };
+
+  /*
+   * Span ids link through the sync builder when it can produce a route (the
+   * row carries a trace id), fall back to click-time resolution for
+   * spanId-only rows, and degrade to plain text when neither is available.
+   */
+  const renderSpanIdValue: (spanId: string, log: Log) => ReactElement = (
+    spanId: string,
+    log: Log,
+  ): ReactElement => {
+    const spanRoute: Route | URL | undefined = props.getSpanRoute
+      ? props.getSpanRoute(spanId, log)
+      : undefined;
+
+    if (spanRoute) {
+      return (
+        <span
+          onClick={(event: React.MouseEvent<HTMLSpanElement>) => {
+            event.stopPropagation();
+          }}
+        >
+          <Link
+            to={spanRoute}
+            className={linkClassName}
+            title={`View span ${spanId}`}
+          >
+            {spanId}
+          </Link>
+        </span>
+      );
+    }
+
+    if (props.resolveSpanRoute) {
+      return (
+        <span
+          onClick={(event: React.MouseEvent<HTMLSpanElement>) => {
+            event.stopPropagation();
+          }}
+        >
+          <Link
+            onClick={() => {
+              openSpanLazily(spanId, log);
+            }}
+            className={linkClassName}
+            title={`View span ${spanId}`}
+          >
+            {spanId}
+          </Link>
+        </span>
+      );
+    }
+
+    return (
+      <span className="font-mono" title={spanId}>
+        {spanId}
+      </span>
+    );
+  };
+
   const getHeaderCell: (columnId: string) => ReactElement = (
     columnId: string,
   ): ReactElement => {
@@ -326,10 +470,15 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
                                   (spanId && !showSpanColumn)) && (
                                   <div className="flex flex-wrap gap-3 text-[11px] tracking-wide text-gray-400">
                                     {traceId && !showTraceColumn && (
-                                      <span>Trace: {traceId}</span>
+                                      <span>
+                                        Trace:{" "}
+                                        {renderTraceIdValue(traceId, log)}
+                                      </span>
                                     )}
                                     {spanId && !showSpanColumn && (
-                                      <span>Span: {spanId}</span>
+                                      <span>
+                                        Span: {renderSpanIdValue(spanId, log)}
+                                      </span>
                                     )}
                                   </div>
                                 )}
@@ -353,11 +502,8 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
                             className="max-w-xs px-4 py-2 text-sm text-gray-600"
                             key={columnId}
                           >
-                            <span
-                              className="block truncate font-mono"
-                              title={traceId}
-                            >
-                              {traceId || "-"}
+                            <span className="block truncate font-mono">
+                              {traceId ? renderTraceIdValue(traceId, log) : "-"}
                             </span>
                           </td>
                         );
@@ -369,11 +515,8 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
                             className="max-w-xs px-4 py-2 text-sm text-gray-600"
                             key={columnId}
                           >
-                            <span
-                              className="block truncate font-mono"
-                              title={spanId}
-                            >
-                              {spanId || "-"}
+                            <span className="block truncate font-mono">
+                              {spanId ? renderSpanIdValue(spanId, log) : "-"}
                             </span>
                           </td>
                         );

package/UI/Components/LogsViewer/components/LogsViewerToolbar.tsx

@@ -4,9 +4,12 @@ import LogTimeRangePicker from "./LogTimeRangePicker";
 import ColumnSelector from "./ColumnSelector";
 import SavedViewsDropdown from "./SavedViewsDropdown";
 import KeyboardShortcutsHelp from "./KeyboardShortcutsHelp";
+import Icon from "../../Icon/Icon";
+import Tooltip from "../../Tooltip/Tooltip";
 import {
   LiveLogsOptions,
   LogsSavedViewOption,
+  LogsSignalPivotAction,
   LogsTableColumnOption,
   LogsViewMode,
 } from "../types";
@@ -38,6 +41,7 @@ export interface LogsViewerToolbarProps {
   showKeyboardShortcuts?: boolean | undefined;
   onToggleKeyboardShortcuts?: (() => void) | undefined;
   onShowDocumentation?: (() => void) | undefined;
+  signalPivotActions?: Array<LogsSignalPivotAction> | undefined;
 }
 
 const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
@@ -119,6 +123,31 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
           </div>
         )}
 
+        {props.signalPivotActions && props.signalPivotActions.length > 0 && (
+          <div
+            className="inline-flex items-center gap-0.5 rounded-md border border-gray-200 bg-white p-0.5 shadow-sm"
+            aria-label="Related telemetry signals"
+          >
+            {props.signalPivotActions.map((action: LogsSignalPivotAction) => {
+              return (
+                <Tooltip key={action.id} text={action.tooltip}>
+                  <button
+                    type="button"
+                    aria-label={action.tooltip}
+                    className="inline-flex h-7 items-center gap-1.5 rounded-md px-2.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400"
+                    onClick={action.onClick}
+                  >
+                    {action.icon && (
+                      <Icon icon={action.icon} className="h-3.5 w-3.5" />
+                    )}
+                    <span>{action.label}</span>
+                  </button>
+                </Tooltip>
+              );
+            })}
+          </div>
+        )}
+
         {props.savedViews && props.onSavedViewSelect && (
           <SavedViewsDropdown
             savedViews={props.savedViews}

package/UI/Components/LogsViewer/types.ts

@@ -1,3 +1,7 @@
+import Route from "../../../Types/API/Route";
+import URL from "../../../Types/API/URL";
+import IconProp from "../../../Types/Icon/IconProp";
+
 export interface LiveLogsOptions {
   isLive: boolean;
   onToggle: (next: boolean) => void;
@@ -25,6 +29,25 @@ export interface ActiveFilter {
   displayKey: string;
   displayValue: string;
   readOnly?: boolean | undefined;
+  /*
+   * When set, the chip renders a small icon-link that opens this route (e.g.
+   * a trace/span chip linking out to the trace view). Chips without a
+   * resolvable destination render as plain chips.
+   */
+  openRoute?: Route | URL | undefined;
+}
+
+/*
+ * One cross-signal pivot action rendered in the toolbar's "related signals"
+ * group (e.g. "Traces" / "Metrics" on the logs explorer). The tooltip is
+ * where callers surface scope fields the target explorer cannot carry.
+ */
+export interface LogsSignalPivotAction {
+  id: string;
+  label: string;
+  icon?: IconProp | undefined;
+  tooltip: string;
+  onClick: () => void;
 }
 
 export type LogsViewMode = "list" | "analytics";

package/UI/Components/Markdown.tsx/MarkdownEditor.tsx

@@ -1,4 +1,5 @@
 import Icon from "../Icon/Icon";
+import KeyboardKey, { KeyboardKeyUtil } from "../KeyboardShortcut/KeyboardKey";
 import IconProp from "../../../Types/Icon/IconProp";
 import TinyFormDocumentation from "../TinyFormDocumentation/TinyFormDocumentation";
 import { FILE_URL } from "../../Config";
@@ -921,12 +922,18 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
           <div className="flex items-center gap-1">
             <ToolbarButton
               icon={IconProp.Bold}
-              title="Bold (Ctrl+B)"
+              title={`Bold (${KeyboardKeyUtil.getDisplayLabel([
+                KeyboardKey.Mod,
+                "B",
+              ])})`}
               onClick={formatActions.bold}
             />
             <ToolbarButton
               icon={IconProp.Italic}
-              title="Italic (Ctrl+I)"
+              title={`Italic (${KeyboardKeyUtil.getDisplayLabel([
+                KeyboardKey.Mod,
+                "I",
+              ])})`}
               onClick={formatActions.italic}
             />
             <ToolbarButton

package/UI/Components/Modal/Modal.tsx

@@ -7,6 +7,7 @@ import ModalFooter from "./ModalFooter";
 import { VeryLightGray } from "../../../Types/BrandColors";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
+import { wasPressConsumedByAnAnchoredPopup } from "../../Types/LayeredDismissal";
 import { lockPageScroll, unlockPageScroll } from "../../Utils/PageScrollLock";
 import React, {
   FunctionComponent,
@@ -78,6 +79,8 @@ const Modal: FunctionComponent<ComponentProps> = (
   >(props.onClose);
   const backdropPressStartedOutsideRef: React.MutableRefObject<boolean> =
     useRef<boolean>(false);
+  const backdropPressEndedInsideRef: React.MutableRefObject<boolean> =
+    useRef<boolean>(false);
   const titleId: string = useId();
   const descriptionId: string = useId();
 
@@ -332,25 +335,54 @@ const Modal: FunctionComponent<ComponentProps> = (
   const onBackdropMouseDown: BackdropPressHandler = (
     event: React.MouseEvent<HTMLDivElement>,
   ): void => {
+    backdropPressEndedInsideRef.current = false;
+
+    /*
+     * A press that a portalled popup has already spent on closing itself is
+     * not a dismissal of this dialog. Without this, clicking the backdrop to
+     * put away an open colour picker closed the picker and the form behind it
+     * in one go.
+     */
+    if (wasPressConsumedByAnAnchoredPopup(event.nativeEvent)) {
+      backdropPressStartedOutsideRef.current = false;
+      return;
+    }
+
     backdropPressStartedOutsideRef.current = isEventOutsideModal(event);
   };
 
+  const onBackdropMouseUp: BackdropPressHandler = (
+    event: React.MouseEvent<HTMLDivElement>,
+  ): void => {
+    /*
+     * The click that follows is reported against the nearest common ancestor
+     * of press and release — this very layer — so by the time it arrives the
+     * two ends are indistinguishable. Where the release landed has to be
+     * recorded while it is still known.
+     */
+    backdropPressEndedInsideRef.current = !isEventOutsideModal(event);
+  };
+
   const onBackdropClick: BackdropPressHandler = (
     event: React.MouseEvent<HTMLDivElement>,
   ): void => {
     /*
-     * Both ends of the click have to land on the backdrop. Selecting text in
-     * the body and releasing the mouse past the edge of the panel is a drag,
-     * not a dismissal, and it used to be the fastest way to lose a filled-in
-     * form.
+     * Both ends of the click have to land on the backdrop. A press that
+     * wandered across the edge of the panel in either direction is a drag —
+     * selecting text in the body and releasing outside, or pressing outside and
+     * releasing on the panel — and either used to be the fastest way to lose a
+     * filled-in form.
      */
     const pressStartedOutside: boolean = backdropPressStartedOutsideRef.current;
+    const pressEndedInside: boolean = backdropPressEndedInsideRef.current;
     backdropPressStartedOutsideRef.current = false;
+    backdropPressEndedInsideRef.current = false;
 
     if (
       props.disableCloseOnBackdropClick ||
       !props.onClose ||
       !pressStartedOutside ||
+      pressEndedInside ||
       !isEventOutsideModal(event) ||
       !isTopmostDialog()
     ) {
@@ -391,6 +423,7 @@ const Modal: FunctionComponent<ComponentProps> = (
       <div
         className="fixed inset-0 z-50 overflow-y-auto"
         onMouseDown={onBackdropMouseDown}
+        onMouseUp={onBackdropMouseUp}
         onClick={onBackdropClick}
       >
         <div className="flex min-h-full items-end justify-center p-0 text-center sm:items-center sm:p-6">