-
Notifications
You must be signed in to change notification settings - Fork 46.9k
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.
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
Extend input type check in selection capabilities (#12062) #12135
Conversation
e9ce874
to
fac6ec0
Compare
@@ -110,6 +114,37 @@ class TextInputFixtures extends React.Component { | |||
<InputTestCase type="url" defaultValue="" /> | |||
</TestCase> | |||
|
|||
<TestCase |
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.
For new test cases that are stateful, can you break it out into it's own component? See NumberInputExtraZeroes.js as an example.
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.
I was in doubt about the implementation. Thanks for the guideline!
@@ -26,7 +26,8 @@ export function hasSelectionCapabilities(elem) { | |||
const nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase(); | |||
return ( | |||
nodeName && | |||
((nodeName === 'input' && elem.type === 'text') || | |||
((nodeName === 'input' && | |||
['text', 'email', 'tel'].indexOf(elem.type) >= 0) || |
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.
Instead of defining an inline array, let's just add some additional cases to the boolean expression.
(
nodeName === 'input' &&
(elem.type === 'text' || elem.type === 'email' || elem.type === 'tel')
)
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.
Thanks for doing this @spirosikmd!
14771a7
to
aa115f7
Compare
aa115f7
to
c9515d3
Compare
Hi @aweary! It would be great if you can have another look at this one! |
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.
Hey @spirosikmd,
Circling back to this, this change isn't correct. hasSelectionCapabilities
should only return true if the element actually has selection capabilities and email
inputs do not.
This is clearly stated in the "do not apply" table in the HTML spec. The only inputs that have selection capabilities are text
, search
, password
, and tel
. We don't account for any of those except text
so we're potentially missing out on restoring selection information in some cases. Let's add those types to account for that.
The root issue of the bug reported in #12062 is that restoreSelection
does not account for input elements that may have changed type after the commit phase. If the new input type supports selection state (text) but the old type didn't (email) it will incorrectly attempt to restore null
selection state
react/packages/react-dom/src/client/ReactInputSelection.js
Lines 54 to 57 in 1fd205a
if (curFocusedElem !== priorFocusedElem && isInDocument(priorFocusedElem)) { | |
if (hasSelectionCapabilities(priorFocusedElem)) { | |
setSelection(priorFocusedElem, priorSelectionRange); | |
} |
What we need to do is also check if priorSelectionRange
isn't null
before calling setSelection
if (priorSelectionRange !== null && hasSelectionCapabilities(priorFocusedElem)) {
setSelection(priorFocusedElem, priorSelectionRange);
}
Could you make these changes please @spirosikmd? Thanks!
c9515d3
to
bc7d887
Compare
Hey @aweary! Thank you for the tip! I added the Regarding the |
Thanks @spirosikmd, this looks good to me. I'd like to hear from @nhunzaker and/or @jquense on this as well before merging.
You should try rebasing and running the |
bc7d887
to
b4993d7
Compare
elem.type === 'search' || | ||
elem.type === 'tel' || | ||
elem.type === 'url' || | ||
elem.type === 'password')) || |
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.
Why is email not in this list?
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.
Sorry. That was very blunt! Should email
be in here? I found a neat table from a spec:
https://html.spec.whatwg.org/multipage/input.html#concept-input-apply
So this matches up with the setSelectionRange
column? Dang. I really want to know the reasoning behind not supporting this for all text based input.
Would it be possible to add a comment at the top of this block that references this table for future contributors?
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.
I will add a comment containing the link as well. As far as I can see we are only using the selectionStart
and selectionEnd
in the code. So I guess we match up with these two rows.
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.
This looks good to me. I think it would be great to leave a comment about why we specifically compare these input types, but I'm happy with the approach.
9af22e3
to
8296f94
Compare
ReactDOM: size: 🔺+0.1%, gzip: 🔺+0.1% Details of bundled changes.Comparing: 5dfbfe9...3425970 react-dom
Generated by 🚫 dangerJS |
scripts/rollup/results.json
Outdated
"size": 467421, | ||
"gzip": 99671 | ||
"size": 467747, | ||
"gzip": 99762 | ||
}, | ||
{ | ||
"filename": "ReactNativeRenderer-prod.js", | ||
"bundleType": "RN_PROD", | ||
"packageName": "react-native-renderer", |
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.
Can you please revert this file?
`restoreSelection` did not account for input elements that have changed type after the commit phase. The new `text` input supported selection but the old `email` did not and `setSelection` was incorrectly trying to restore `null` selection state. We also extend input type check in selection capabilities to cover cases where input type is `search`, `tel`, `url`, or `password`.
8296f94
to
a96034f
Compare
Hi @aweary! This should be ready to merge! |
The requested feedback checks out for me. @aweary what say you? |
@spirosikmd I'll check in to make sure this is still on the team's radar if we haven't come to consensus by next week. Thanks for your contribution! |
This commit adds a button to restore the original state of the ReplaceEmailInput fixture so that it can be run multiple times without refreshing the page.
This looks great to me. I pushed a commit that adds a reset button to the test fixture so that the test can be run multiple times without refreshing the page. That also covers the inverse case. I'll wait for CI, then merge. |
Great! Thank you @nhunzaker! |
Thanks, @spirosikmd! |
193: Update dependency react to v16.4.1 r=magopian a=renovate[bot] This Pull Request updates dependency [react](https://github.com/facebook/react) from `v16.4.0` to `v16.4.1` <details> <summary>Release Notes</summary> ### [`v16.4.1`](https://github.com/facebook/react/blob/master/CHANGELOG.md#​1641-June-13-2018) [Compare Source](facebook/react@v16.4.0...v16.4.1) ##### React * You can now assign `propTypes` to components returned by `React.ForwardRef`. ([@​bvaughn] in [#​12911](`https://github.com/facebook/react/pull/12911`)) ##### React DOM * Fix a crash when the input `type` changes from some other types to `text`. ([@​spirosikmd] in [#​12135](`https://github.com/facebook/react/pull/12135`)) * Fix a crash in IE11 when restoring focus to an SVG element. ([@​ThaddeusJiang] in [#​12996](`https://github.com/facebook/react/pull/12996`)) * Fix a range input not updating in some cases. ([@​Illu] in [#​12939](`https://github.com/facebook/react/pull/12939`)) * Fix input validation triggering unnecessarily in Firefox. ([@​nhunzaker] in [#​12925](`https://github.com/facebook/react/pull/12925`)) * Fix an incorrect `event.target` value for the `onChange` event in IE9. ([@​nhunzaker] in [#​12976](`https://github.com/facebook/react/pull/12976`)) * Fix a false positive error when returning an empty `<React.Fragment />` from a component. ([@​philipp-spiess] in [#​12966](`https://github.com/facebook/react/pull/12966`)) ##### React DOM Server * Fix an incorrect value being provided by new context API. ([@​ericsoderberghp] in [#​12985](`https://github.com/facebook/react/pull/12985`), [@​gaearon] in [#​13019](`https://github.com/facebook/react/pull/13019`)) ##### React Test Renderer * Allow multiple root children in test renderer traversal API. ([@​gaearon] in [#​13017](`https://github.com/facebook/react/pull/13017`)) * Fix `getDerivedStateFromProps()` in the shallow renderer to not discard the pending state. ([@​fatfisz] in [#​13030](`https://github.com/facebook/react/pull/13030`)) --- </details> --- This PR has been generated by [Renovate Bot](https://renovatebot.com). Co-authored-by: Renovate Bot <bot@renovateapp.com>
25: Update react monorepo to v16.4.1 r=renovate[bot] a=renovate[bot] This Pull Request renovates the package group "react monorepo". - [react-dom](https://github.com/facebook/react) (`dependencies`): from `16.4.0` to `16.4.1` - [react](https://github.com/facebook/react) (`dependencies`): from `16.4.0` to `16.4.1` # Release Notes <details> <summary>facebook/react</summary> ### [`v16.4.1`](https://github.com/facebook/react/blob/master/CHANGELOG.md#​1641-June-13-2018) [Compare Source](facebook/react@v16.4.0...v16.4.1) ##### React * You can now assign `propTypes` to components returned by `React.ForwardRef`. ([@​bvaughn] in [#​12911](`https://github.com/facebook/react/pull/12911`)) ##### React DOM * Fix a crash when the input `type` changes from some other types to `text`. ([@​spirosikmd] in [#​12135](`https://github.com/facebook/react/pull/12135`)) * Fix a crash in IE11 when restoring focus to an SVG element. ([@​ThaddeusJiang] in [#​12996](`https://github.com/facebook/react/pull/12996`)) * Fix a range input not updating in some cases. ([@​Illu] in [#​12939](`https://github.com/facebook/react/pull/12939`)) * Fix input validation triggering unnecessarily in Firefox. ([@​nhunzaker] in [#​12925](`https://github.com/facebook/react/pull/12925`)) * Fix an incorrect `event.target` value for the `onChange` event in IE9. ([@​nhunzaker] in [#​12976](`https://github.com/facebook/react/pull/12976`)) * Fix a false positive error when returning an empty `<React.Fragment />` from a component. ([@​philipp-spiess] in [#​12966](`https://github.com/facebook/react/pull/12966`)) ##### React DOM Server * Fix an incorrect value being provided by new context API. ([@​ericsoderberghp] in [#​12985](`https://github.com/facebook/react/pull/12985`), [@​gaearon] in [#​13019](`https://github.com/facebook/react/pull/13019`)) ##### React Test Renderer * Allow multiple root children in test renderer traversal API. ([@​gaearon] in [#​13017](`https://github.com/facebook/react/pull/13017`)) * Fix `getDerivedStateFromProps()` in the shallow renderer to not discard the pending state. ([@​fatfisz] in [#​13030](`https://github.com/facebook/react/pull/13030`)) --- </details> --- This PR has been generated by [Renovate Bot](https://renovatebot.com). Co-authored-by: Renovate Bot <bot@renovateapp.com>
restoreSelection
did not account for input elements that have changedtype after the commit phase. The new
text
input supported selectionbut the old
email
did not andsetSelection
was incorrectly trying torestore
null
selection state.We also extend input type check in selection capabilities to cover cases
where input type is
search
,tel
,url
, orpassword
.Fix #12062