Minimally support iframes (nested browsing contexts) in selection event handling #12037
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| import PropTypes from 'prop-types'; | ||
| const React = window.React; | ||
|
|
||
| const propTypes = { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| const React = window.React; | ||
| const ReactDOM = window.ReactDOM; | ||
|
|
||
| class IframePortal extends React.Component { | ||
| iframeRef = null; | ||
|
|
||
| handleRef = ref => { | ||
| if (ref !== this.iframeRef) { | ||
| this.iframeRef = ref; | ||
| if (ref) { | ||
| if (ref.contentDocument && this.props.head) { | ||
| ref.contentDocument.head.innerHTML = this.props.head; | ||
| } | ||
| // Re-render must take place in the next tick (Firefox) | ||
| setTimeout(() => { | ||
| this.forceUpdate(); | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| render() { | ||
| const ref = this.iframeRef; | ||
| let portal = null; | ||
| if (ref && ref.contentDocument) { | ||
| portal = ReactDOM.createPortal( | ||
| this.props.children, | ||
| ref.contentDocument.body | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div> | ||
| <iframe | ||
| style={{border: 'none', height: this.props.height}} | ||
| ref={this.handleRef} | ||
| /> | ||
| {portal} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| class IframeSubtree extends React.Component { | ||
| warned = false; | ||
| render() { | ||
| if (!this.warned) { | ||
| console.error( | ||
| `IFrame has not yet been implemented for React v${React.version}` | ||
| ); | ||
| this.warned = true; | ||
| } | ||
| return <div>{this.props.children}</div>; | ||
| } | ||
| } | ||
|
|
||
| export default (ReactDOM.createPortal ? IframePortal : IframeSubtree); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import TestCase from '../../TestCase'; | ||
| import Iframe from '../../Iframe'; | ||
| const React = window.React; | ||
|
|
||
| class OnSelectIframe extends React.Component { | ||
| state = {count: 0, value: 'Select Me!'}; | ||
|
|
||
| _onSelect = event => { | ||
| this.setState(({count}) => ({count: count + 1})); | ||
| }; | ||
|
|
||
| _onChange = event => { | ||
| this.setState({value: event.target.value}); | ||
| }; | ||
|
|
||
| render() { | ||
| const {count, value} = this.state; | ||
| return ( | ||
| <Iframe height={60}> | ||
| Selection Event Count: {count} | ||
| <input | ||
| type="text" | ||
| onSelect={this._onSelect} | ||
| value={value} | ||
| onChange={this._onChange} | ||
| /> | ||
| </Iframe> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default class OnSelectEventTestCase extends React.Component { | ||
| render() { | ||
| return ( | ||
| <TestCase | ||
| title="onSelect events within iframes" | ||
| description="onSelect events should fire for elements rendered inside iframes"> | ||
| <TestCase.Steps> | ||
| <li>Highlight some of the text in the input below</li> | ||
| <li>Move the cursor around using the arrow keys</li> | ||
| </TestCase.Steps> | ||
| <TestCase.ExpectedResult> | ||
| The displayed count should increase as you highlight or move the | ||
| cursor | ||
| </TestCase.ExpectedResult> | ||
| <OnSelectIframe /> | ||
| </TestCase> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import TestCase from '../../TestCase'; | ||
| import Iframe from '../../Iframe'; | ||
| const React = window.React; | ||
|
|
||
| export default class ReorderedInputsTestCase extends React.Component { | ||
| state = {count: 0}; | ||
|
|
||
| componentDidMount() { | ||
| this.interval = setInterval(() => { | ||
| this.setState({count: this.state.count + 1}); | ||
| }, 2000); | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| clearInterval(this.interval); | ||
| } | ||
|
|
||
| renderInputs() { | ||
| const inputs = [ | ||
| <input key={1} defaultValue="Foo" />, | ||
| <input key={2} defaultValue="Bar" />, | ||
| ]; | ||
| if (this.state.count % 2 === 0) { | ||
| inputs.reverse(); | ||
| } | ||
| return inputs; | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <TestCase title="Reordered input elements in iframes" description=""> | ||
| <TestCase.Steps> | ||
| <li>The two inputs below swap positions every two seconds</li> | ||
| <li>Select the text in either of them</li> | ||
| <li>Wait for the swap to occur</li> | ||
| </TestCase.Steps> | ||
| <TestCase.ExpectedResult> | ||
| The selection you made should be maintained | ||
| </TestCase.ExpectedResult> | ||
| <Iframe height={50}>{this.renderInputs()}</Iframe> | ||
| </TestCase> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import FixtureSet from '../../FixtureSet'; | ||
| import ReorderedInputsTestCase from './ReorderedInputsTestCase'; | ||
| import OnSelectEventTestCase from './OnSelectEventTestCase'; | ||
| const React = window.React; | ||
|
|
||
| export default function SelectionEvents() { | ||
| return ( | ||
| <FixtureSet | ||
| title="Selection Restoration" | ||
| description=" | ||
| When React commits changes it may perform operations which cause existing | ||
| selection state to be lost. This is manually managed by reading the | ||
| selection state before commits and then restoring it afterwards. | ||
| "> | ||
| <ReorderedInputsTestCase /> | ||
| <OnSelectEventTestCase /> | ||
| </FixtureSet> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,24 +10,8 @@ import getActiveElement from './getActiveElement'; | |
| import * as ReactDOMSelection from './ReactDOMSelection'; | ||
| import {ELEMENT_NODE, TEXT_NODE} from '../shared/HTMLNodeType'; | ||
|
|
||
| function isTextNode(node) { | ||
| return node && node.nodeType === TEXT_NODE; | ||
| } | ||
|
|
||
| function containsNode(outerNode, innerNode) { | ||
|
|
@@ -49,7 +33,27 @@ function containsNode(outerNode, innerNode) { | |
| } | ||
|
|
||
| function isInDocument(node) { | ||
| return ( | ||
| node && | ||
|
There was a problem hiding this comment. Why do we need to check if There was a problem hiding this comment. The value that gets passed in comes from There was a problem hiding this comment. We don't use There was a problem hiding this comment. @gaearon We can update export default function getActiveElement(doc: ?Document): Element {
doc = doc || document;
try {
return doc.activeElement || doc.body;
} catch (e) {
return doc.body;
}
}But strictly speaking, flow will still complain that export default function getActiveElement(doc: ?Document): Element {
doc = doc || document;
const body = doc.body || doc.createElement('body');
try {
return doc.activeElement || body;
} catch (e) {
return body;
}
}Do you have a preferred approach? There was a problem hiding this comment. I want to lean towards the first, but I keep reasoning out of it in favor of the second. Body could be null, and it really it should never happen. But I've been surprised too much before :). With the second example, do you need a try/catch? Also: do you anticipate any problems with code downstream working with a document body that isn't attached? There was a problem hiding this comment. @nhunzaker No try/catch needed for the second example, and the ReactInputSelection plugin won’t have any issues; the code is already setup to handle detached DOM elements for a case where the active element becomes detached between when it is first read and cached and after React finishes committing an update. The second option has grown on me; I suggested it thinking it was silly, but now feel like it’s pretty reasonable. If we go with that one, should we add a comment explaining that document.body can be null? There was a problem hiding this comment.
Let's go with it 👍 |
||
| node.ownerDocument && | ||
| containsNode(node.ownerDocument.documentElement, node) | ||
| ); | ||
| } | ||
|
|
||
| function getActiveElementDeep() { | ||
| let win = window; | ||
| let element = getActiveElement(); | ||
| while (element instanceof win.HTMLIFrameElement) { | ||
| // Accessing the contentDocument of a HTMLIframeElement can cause the browser | ||
| // to throw, e.g. if it has a cross-origin src attribute | ||
| try { | ||
| win = element.contentDocument.defaultView; | ||
| } catch (e) { | ||
| return element; | ||
| } | ||
| element = getActiveElement(win.document); | ||
| } | ||
| return element; | ||
| } | ||
|
|
||
| /** | ||
|
|
@@ -80,7 +84,7 @@ export function hasSelectionCapabilities(elem) { | |
| } | ||
|
|
||
| export function getSelectionInformation() { | ||
| const focusedElem = getActiveElementDeep(); | ||
| return { | ||
| focusedElem: focusedElem, | ||
| selectionRange: hasSelectionCapabilities(focusedElem) | ||
|
|
@@ -95,7 +99,7 @@ export function getSelectionInformation() { | |
| * nodes and place them back in, resulting in focus being lost. | ||
| */ | ||
| export function restoreSelection(priorSelectionInformation) { | ||
| const curFocusedElem = getActiveElementDeep(); | ||
| const priorFocusedElem = priorSelectionInformation.focusedElem; | ||
| const priorSelectionRange = priorSelectionInformation.selectionRange; | ||
| if (curFocusedElem !== priorFocusedElem && isInDocument(priorFocusedElem)) { | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍