From b695c6fa2a7a473cce22a41d8ea3b5e62555fca6 Mon Sep 17 00:00:00 2001 From: Ian Sanders Date: Tue, 25 Jul 2023 18:38:24 +0000 Subject: [PATCH 1/2] Update `useSyntheticChange` to only call `execCommand` if input is focused --- src/drafts/hooks/useSyntheticChange.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/drafts/hooks/useSyntheticChange.ts b/src/drafts/hooks/useSyntheticChange.ts index cf1c3809c0b..e67c3617bf1 100644 --- a/src/drafts/hooks/useSyntheticChange.ts +++ b/src/drafts/hooks/useSyntheticChange.ts @@ -94,7 +94,7 @@ export const useSyntheticChange = ({inputRef, fallbackEventHandler}: UseSyntheti const input = inputRef.current if (!input) return - input.focus() // the input must be focused to execute execCommand + input.focus() const replaceRange = replaceRange_ ?? [ input.selectionStart ?? input.value.length, @@ -113,6 +113,10 @@ export const useSyntheticChange = ({inputRef, fallbackEventHandler}: UseSyntheti // but it's a deprecated API and there's no alternative. It also doesn't work in test environments let execCommandResult = false try { + // There is no guarantee the input is focused even after calling `focus()` on it. For example, the focus could + // be trapped by an overlay. In that case we must prevent the change from happening in some unexpected target. + if (document.activeElement !== input) throw new Error('Input must be focused to use execCommand') + // expand selection to the whole range and replace it with the new value input.setSelectionRange(replaceRange[0], replaceRange[1]) execCommandResult = From 210a6ac2a92e33521ddad92a195b8f33dd503818 Mon Sep 17 00:00:00 2001 From: Ian Sanders Date: Tue, 25 Jul 2023 14:54:18 -0400 Subject: [PATCH 2/2] Create tame-foxes-tan.md --- .changeset/tame-foxes-tan.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tame-foxes-tan.md diff --git a/.changeset/tame-foxes-tan.md b/.changeset/tame-foxes-tan.md new file mode 100644 index 00000000000..f70d046cf7d --- /dev/null +++ b/.changeset/tame-foxes-tan.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Fix `MarkdownEditor` file uploads inserting the URL into the wrong input when an overlay is open