Skip to content

Support iframes (nested browsing contexts) in selection event handling #9184

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
acusti wants to merge 24 commits into from
Closed

Support iframes (nested browsing contexts) in selection event handling #9184

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
e1d4110
Use event target doc as getActiveElement context
acusti Oct 24, 2017
ed0cc8a
Use node’s window and document when possible
acusti Oct 30, 2017
8f11b2c
Make getting/setting selection check iframe contents
acusti Oct 4, 2016
83cfb55
Add tests for ReactInputSelection
acusti Nov 1, 2017
374d525
Adapt restoreSelection to work for all activeElements
acusti Oct 10, 2016
f6f9e35
Tests for getting / restoring selections across iframes
acusti Oct 11, 2016
6ac703f
Add guards for Firefox and Safari compatibility
acusti Mar 15, 2017
cec8c3f
Prettier
acusti Nov 1, 2017
0163795
Update test file header
acusti Nov 1, 2017
d777546
Avoid causing focus/blur issues from restoreSelection
acusti Nov 1, 2017
7c59a77
Add early return for restoring selection common case
acusti Nov 1, 2017
131357e
Merge remote-tracking branch 'upstream/master' into iframes
acusti Nov 3, 2017
2d4ac46
Prefer active element as element with selection
acusti Nov 16, 2017
5755556
Merge branch 'master' into iframes
acusti Nov 16, 2017
b3998eb
Prettier
acusti Nov 16, 2017
174375c
Prevent restoreSelection overwriting active element
acusti Nov 17, 2017
39a9589
Code review-based cleanup and improvements
acusti Nov 17, 2017
82443f7
Detect all valid selection-capable input types
acusti Nov 19, 2017
b25279d
Merge branch 'master' into iframes
acusti Nov 19, 2017
026e8f0
Merge branch 'master' into iframes
acusti Nov 28, 2017
689d7c1
Merge branch 'master' into iframes
acusti Dec 30, 2017
074ff51
Guard against null (based on failing test)
acusti Dec 30, 2017
0744710
Linting (var :arrow_right: const)
acusti Dec 31, 2017
c71601b
Merge branch 'master' into iframes
acusti Jan 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Code review-based cleanup and improvements
  • Loading branch information
@acusti
acusti committed Nov 17, 2017
commit 39a9589618767a3d1ce488479a8bc1957ed49079
5 changes: 1 addition & 4 deletions packages/react-dom/src/client/ReactInputSelection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,10 +164,7 @@ export function restoreSelection(priorSelectionInformation) {
}
});

if (
curActiveElement !== priorActiveElement &&
isInDocument(priorActiveElement)
) {
if (curActiveElement !== priorActiveElement) {
focusNodePreservingScroll(priorActiveElement);
}
}
Expand Down
26 changes: 16 additions & 10 deletions packages/react-dom/src/events/SelectEventPlugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,20 @@ function getSelection(node) {
}
}

/**
* Get document associated with the event target.
*
* @param {object} nativeEventTarget
* @return {Document}
*/
function getEventTargetDocument(eventTarget) {
return eventTarget.window === eventTarget
? eventTarget.document
: eventTarget.nodeType === DOCUMENT_NODE
? eventTarget
: eventTarget.ownerDocument;
}

/**
* Poll selection to see whether it's changed.
*
Expand All @@ -93,10 +107,7 @@ function constructSelectEvent(nativeEvent, nativeEventTarget) {
// selection (this matches native `select` event behavior). In HTML5, select
// fires only on input and textarea thus if there's no focused element we
// won't dispatch.
var doc =
nativeEventTarget.ownerDocument ||
nativeEventTarget.document ||
nativeEventTarget;
var doc = getEventTargetDocument(nativeEventTarget);

if (
mouseDown ||
Expand Down Expand Up @@ -152,12 +163,7 @@ var SelectEventPlugin = {
nativeEvent,
nativeEventTarget,
) {
var doc =
nativeEventTarget.window === nativeEventTarget
? nativeEventTarget.document
: nativeEventTarget.nodeType === DOCUMENT_NODE
? nativeEventTarget
: nativeEventTarget.ownerDocument;
var doc = getEventTargetDocument(nativeEventTarget);
// Track whether all listeners exists for this plugin. If none exist, we do
// not extract events. See #3639.
if (!doc || !isListeningToAllDependencies('onSelect', doc)) {
Expand Down
8 changes: 3 additions & 5 deletions packages/react-dom/src/events/SyntheticClipboardEvent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,9 @@ import SyntheticEvent from 'events/SyntheticEvent';
*/
var ClipboardEventInterface = {
clipboardData: function(event) {
if ('clipboardData' in event) {
return event.clipboardData;
}
var doc = (event.target && event.target.ownerDocument) || document;
return doc.defaultView.clipboardData;
return 'clipboardData' in event
? event.clipboardData
: window.clipboardData;
},
};
Copy link
Contributor

@nhunzaker nhunzaker Nov 16, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does clipboard data have to do with selection?

Copy link
Contributor Author

@acusti acusti Nov 17, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nothing to do with selection; this is just another part of the codebase that relies on the global window object rather than the window object relative to the DOM node being used. That said, I just looked it up, and window.clipboardData is an IE-only API and one where it seems like the code being executed should only try to look up it’s own window.clipboardData (because of browser permissions / security settings), so I’m going to revert this set of changes.

Copy link
Contributor

@nhunzaker nhunzaker Nov 17, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah still, do you think it's worth landing? What do you think about sending this out in a separate PR?

Copy link
Contributor Author

@acusti acusti Nov 17, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don’t know really know anything about clipboard APIs in IE, but based on a quick google search, my hunch is that this change wouldn’t actually be for the better. There’s some mentions about browser settings and issues with clipboardData not being accessible across different browsing contexts, so keeping it hardcoded to window.clipboardData might actually be correct.

But I’d be happy to open a separate PR with it if someone would be able to figure that all out.


Expand Down