# codemirror copies text even if blurred

**URL:** <https://discuss.codemirror.net/t/codemirror-copies-text-even-if-blurred/8627>\
**Category:** v6\
**Created:** [September 17, 2024, 10:31am UTC](https://discuss.codemirror.net/t/codemirror-copies-text-even-if-blurred/8627 "2024-09-17T10:31:31Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![adityatoshniwal](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/adityatoshniwal/32/3992_2.png) [@adityatoshniwal](https://discuss.codemirror.net/u/adityatoshniwal)\
**Post date:** [September 17, 2024, 10:31am UTC](https://discuss.codemirror.net/t/codemirror-copies-text-even-if-blurred/8627/1 "2024-09-17T10:31:31Z")

</div>

Hi @marijn,

Its difficult to explain so I recorded it. [pgadmin-copy-cm-issue.mov - Google Drive](https://drive.google.com/file/d/1wknksJlCY1_2i-4iw-4J2WId0trMBWor/view?usp=sharing)  
Basically, when I select something in codemirror, then go to some outside element and hit copy - then it still copies codemirror text. When I do the same thing but before going to outside element, I focus on a input element like textarea, then go to some outside element and hit copy - then it works fine.

Issue raised in pgAdmin - [Ctrl+C to copy does not work in data grid · Issue #7920 · pgadmin-org/pgadmin4 · GitHub](https://github.com/pgadmin-org/pgadmin4/issues/7920)

Edited: The grid below handles keydown and on ctrl+c copies the code to clipboard. I tried to preventDefault/stopPropagation from grid but it didn’t work.

Appreciate your efforts.

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [September 17, 2024, 11:03am UTC](https://discuss.codemirror.net/t/codemirror-copies-text-even-if-blurred/8627/2 "2024-09-17T11:03:40Z")

</div>

I don’t know what the page your are on in that screencast is doing with focus and DOM selection, but if I try to reproduce this with a simple focusable non-input element (a paragraph with `tabindex=0`), I cannot copy the previously-selected text from CodeMirror after I focus that element.

---

<div class="post-metadata">

**Author:** ![adityatoshniwal](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/adityatoshniwal/32/3992_2.png) [@adityatoshniwal](https://discuss.codemirror.net/u/adityatoshniwal)\
**Post date:** [September 18, 2024, 5:30am UTC](https://discuss.codemirror.net/t/codemirror-copies-text-even-if-blurred/8627/3 "2024-09-18T05:30:22Z")

</div>

Hi @marijn,

Thank you for looking into it. I will try to create a minimal reproducible stackblitz if there is any issue with CM.

---

<div class="post-metadata">

**Author:** ![adityatoshniwal](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/adityatoshniwal/32/3992_2.png) [@adityatoshniwal](https://discuss.codemirror.net/u/adityatoshniwal)\
**Post date:** [January 2, 2025, 6:15am UTC](https://discuss.codemirror.net/t/codemirror-copies-text-even-if-blurred/8627/4 "2025-01-02T06:15:03Z")

</div>

Hi @marijn,

I create a stackblitz here - [Vitejs - Vite (forked) - StackBlitz](https://stackblitz.com/edit/vitejs-vite-enpclrbq).  
In this example, select the code in the CM window and then click on ‘click here’.  
The winow.getSelection().isCollapsed remain false. And when Ctrl+C is pressed it copies from CM window.

Let me know if you need more details.

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [January 2, 2025, 12:48pm UTC](https://discuss.codemirror.net/t/codemirror-copies-text-even-if-blurred/8627/5 "2025-01-02T12:48:55Z")

</div>

There is still a ton of React stuff going on in that reproduction. I’m not going to pick through that to figure out what’s happening. If you can reduce this to a simple raw DOM setup, I can take a look.

---

<div class="post-metadata">

**Author:** ![adityatoshniwal](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/adityatoshniwal/32/3992_2.png) [@adityatoshniwal](https://discuss.codemirror.net/u/adityatoshniwal)\
**Post date:** [January 2, 2025, 1:15pm UTC](https://discuss.codemirror.net/t/codemirror-copies-text-even-if-blurred/8627/6 "2025-01-02T13:15:35Z")

</div>

Sure let me try creating a very simple example with only CM.

---

<div class="post-metadata">

**Author:** ![adityatoshniwal](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/adityatoshniwal/32/3992_2.png) [@adityatoshniwal](https://discuss.codemirror.net/u/adityatoshniwal)\
**Post date:** [January 2, 2025, 1:38pm UTC](https://discuss.codemirror.net/t/codemirror-copies-text-even-if-blurred/8627/7 "2025-01-02T13:38:29Z")

</div>

Hi @marijn,

Here’s a codepen with only CM lib. No other libs - [https://codepen.io/adityatoshniwal14/pen/VYZrZWj?editors=1111](https://codepen.io/adityatoshniwal14/pen/VYZrZWj?editors=1111)

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [January 2, 2025, 3:37pm UTC](https://discuss.codemirror.net/t/codemirror-copies-text-even-if-blurred/8627/8 "2025-01-02T15:37:20Z")

</div>

This seems to be how browsers treat the selection when you click into a tabindex=0 element. If you use a simple `<div contenteditable=true>abcd</div>` element instead of the CodeMirror editor, the behavior you see is the same. The active selection remains in the editable element, even though the focus moved to the other element. I don’t think there’s a reason for CodeMirror to fight the native behavior in this case.

---

<div class="post-metadata">

**Author:** ![adityatoshniwal](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/adityatoshniwal/32/3992_2.png) [@adityatoshniwal](https://discuss.codemirror.net/u/adityatoshniwal)\
**Post date:** [January 3, 2025, 7:18am UTC](https://discuss.codemirror.net/t/codemirror-copies-text-even-if-blurred/8627/9 "2025-01-03T07:18:41Z")

</div>

Oh I see. I had compared with textarea but didn’t check with content editable.  
Thank you for looking into this.

---

<div class="post-metadata">

**Author:** ![adityatoshniwal](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/adityatoshniwal/32/3992_2.png) [@adityatoshniwal](https://discuss.codemirror.net/u/adityatoshniwal)\
**Post date:** [January 15, 2025, 6:25am UTC](https://discuss.codemirror.net/t/codemirror-copies-text-even-if-blurred/8627/10 "2025-01-15T06:25:32Z")

</div>

Hi @marijn,

The selection part is understood and is behaving same as native.  
But how can I avoid CM copy handler when it is not in focus?  
Focus is clearly on some other div and I don’t want CM to call its own copy handler.

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [January 15, 2025, 7:08am UTC](https://discuss.codemirror.net/t/codemirror-copies-text-even-if-blurred/8627/11 "2025-01-15T07:08:34Z")

</div>

I mean, you could just remove your `user-select: none` style and sidestep this whole thing. Or try to write a copy handler for the editor that calls `preventDefault` when the editor doesn’t have focus.

---

<div class="post-metadata">

**Author:** ![adityatoshniwal](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/adityatoshniwal/32/3992_2.png) [@adityatoshniwal](https://discuss.codemirror.net/u/adityatoshniwal)\
**Post date:** [January 15, 2025, 7:55am UTC](https://discuss.codemirror.net/t/codemirror-copies-text-even-if-blurred/8627/12 "2025-01-15T07:55:30Z")

</div>

So I added a domeventhandler for copy and added below. But the code is called only when CM is focussed ☹ However, copying is called.

```auto
function handleCopy(e, view) {
  if(view.hasFocus) {
    e.preventDefault();
  }
}

```