Git Product home page Git Product logo

Comments (6)

hugoholgersson avatar hugoholgersson commented on July 20, 2024

A focused selection is always visible. In this case we have a visible but unfocused selection.

Users expect effective CTRL+C/V/P anytime a selection is visible? In this case, users can't know if the selection is focused or not. They see a blue selection so they expect interaction with it?

To fulfill that expectation, maybe CTRL+C/V/P should move focus to a visible&&unfocused selection? Hmm, could be complicated; the focus move would need to be done after any ClipboardEvent handler has had a chance to cancel the default operation => ClipboardEvents must target the visible selection.

Either way, I think it is safe to spec:
"Set target to be the element that contains the start of the visible selection in document order, or the body element if there is no visible selection or cursor"

from clipboard-apis.

xiaochengh avatar xiaochengh commented on July 20, 2024

I'm not sure if users expect effective cut/paste when there is unfocused visible selection. It can be confusing if cut/paste still modifies content of a contenteditable even though the user has explicitly moved the focus away.

And at least for Chrome, focused and unfocused selection have different appearance. In Chrome, a focused element has a light blue border. Hence, the user can tell whether selection is focused by checking if the selection is inside the light blue border or not.

from clipboard-apis.

gked avatar gked commented on July 20, 2024

As @xiaochengh pointed out when selection is greyed out this is the true case of loss of focus. Browser doesn't really takes away the focus when clicking on the checkbox in your example. Being in focus is still a requirement to effectively being able to insert into DOM (by the user, I mean).

Also, I am pretty sure all browsers send visual queues to the user if a selection is not in focus so there is not confusion to the user.

Perhaps, we could add an constrain to the first part of the statement - "...element that is in focus and contains the start of the visible selection in document order"

from clipboard-apis.

hugoholgersson avatar hugoholgersson commented on July 20, 2024

Browser doesn't really takes away the focus when clicking on the checkbox in your example.

Focus is moved to the checkbox according to document.activeElement... but the (now unfocused) selection can still be copied with CTRL+C.

And at least for Chrome, focused and unfocused selection have different appearance. In Chrome, a focused element has a light blue border. Hence, the user can tell whether selection is focused by checking if the selection is inside the light blue border or not.

Ah yes! True that. I didn't think about that "focus-box". I just saw the blue selection. The selection is unfocused but can still be copied with CTRL+C so it makes sense that it is blue even tough it is outside of the focus-box. In this case, what should be the copy ClipboardEvent's target? Answer: the selected element (not document.body). All browsers do this already.

If we say,

"...element that is in focus and contains the start of the visible selection in document order"

In the checkbox-case, the selection is not in focus (if you ask document.activeElement) => The copy event would target document.body and not the selected element (wrong). That's why I think it's better if we use the word "visible". The word "focus" can be a little bit ambiguous in this context?

from clipboard-apis.

rniwa avatar rniwa commented on July 20, 2024

Note that on macOS & iOS, there is no distinction between selection & focus. Focus always moves to wherever selection is last set by the user.

from clipboard-apis.

hugoholgersson avatar hugoholgersson commented on July 20, 2024

Now that the spec update has landed, let's close this?

from clipboard-apis.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.