Fix uncontrolled radios #10156

jquense · 2017-07-12T15:55:51Z

Fixes #9988, this is against master but we should cherry-pick the change back to 15.6 for a patch release.

I added a fixture instead of a test because, writing a unit test that reproduced the issue was confusingly hard actually.

Most of the extra bits here are to handle both fiber and stack, the content of the PR is really the one line in DOMComponent.

jquense · 2017-07-12T15:56:42Z

fixtures/dom/public/react-loader.js

-  REACT_PATH = 'https://unpkg.com/react@' + version + '/dist/react.min.js';
-  DOM_PATH = 'https://unpkg.com/react-dom@' + version + '/dist/react-dom.min.js';
+  REACT_PATH = 'https://unpkg.com/react@' + version + '/dist/react.js';
+  DOM_PATH = 'https://unpkg.com/react-dom@' + version + '/dist/react-dom.js';


I switched to the unminified versions intentionally so was easier to step through stuff in devtools

jquense · 2017-07-12T15:57:22Z

src/renderers/dom/stack/client/ReactDOMComponent.js

@@ -860,6 +860,9 @@ ReactDOMComponent.Mixin = {
        // happen after `_updateDOMProperties`. Otherwise HTML5 input validations
        // raise warnings and prevent the new value from being assigned.
        ReactDOMInput.updateWrapper(this);
+        // We also check that we haven't missed a value update, such as a
+        // Radio group shifting the checked value to another named radio input.
+        inputValueTracking.updateValueIfChanged(this);


This is the actual fix

gaearon · 2017-07-12T15:59:27Z

src/renderers/dom/shared/inputValueTracking.js

-function attachTracker(inst: InstanceWithWrapperState, tracker: ?ValueTracker) {
-  inst._wrapperState.valueTracker = tracker;
+function detachTracker(subject: SubjectWithWrapperState) {
+  delete subject._wrapperState.valueTracker;


Can we use = null instead? delete causes deopts in my experience.

I think so. I think originally I was being overly cautious about expected properties sticking around.

gaearon · 2017-07-12T16:00:04Z

src/renderers/dom/shared/inputValueTracking.js

-    );
+
+    var node = inst;
+    if (!(inst: any).nodeName) {


Can you comment on this part? What are you trying to detect?

yeah its not great, I'm trying to detect if inst is a component instance, like it is in stack, or a DOM node as in fiber. This is the most minimal DRY change I could think of. Alternatively we could split this method into two, but its a bunch of duplication.

Let's use same check as in here and leave a TODO to remove it when Stack is removed.

perfect 👍

gaearon · 2017-07-12T16:58:27Z

Looks like Stack tests are failing

 FAIL  src/renderers/dom/shared/__tests__/inputValueTracking-test.js
  ● inputValueTracking › should stop tracking

    expect(received).toBe(expected)
    
    Expected value to be (using ===):
      false
    Received:
      true

Also prettier is unhappy.

jquense · 2017-07-12T17:35:30Z

not sure what the deal with prettier is, i ran it locally. lemme mess around with it. Do I have to do something special to run tests against the stack renderer?

jquense · 2017-07-12T17:38:24Z

o nvm on the failing test, that's my bad. sorry

nhunzaker · 2017-07-12T19:25:18Z

@jquense This looks great from my end. I'd be happy to take on some manual browser testing. What should I test for?

nhunzaker

Aside from the reference error (covered by lint), this checks out in:

IE11
IE15
Chrome 59
Safari 10
Firefox 54

nhunzaker · 2017-07-13T00:54:14Z

fixtures/dom/src/components/TestCase.js

      !version || !resolvedIn || semver.gte(version, resolvedIn);

-    complete = !isTestRelevant || complete;
+    complete = !isTestFixed || complete;


Doing some local testing, looks like this causes a failure on line 103:
https://github.com/jquense/react/blob/15228e8b5f9d056d475955a54723cd906ffa5619/fixtures/dom/src/components/TestCase.js#L103

Last time I do merge conflict resolve on github :P man.

nhunzaker · 2017-07-13T01:27:11Z

Here's a test build with the lint fix:
http://react-fix-uncontrolled-radios.surge.sh/

jquense · 2017-07-13T03:07:19Z

I don't think this change could change behavior for controlled inputs but technically it's doing slightly more work on every input update. I did run the various fixtures for input changes and didn't see anything but just noting it for posterity.

nhunzaker · 2017-07-13T20:02:35Z

Checks out for me. @jquense Could you handle bringing this over to 15.x?

gaearon · 2017-07-13T22:27:46Z

AFAIK @flarnie's not working on 15.6.x right now. Do you want to handle this release? Would be your first release :-)

nhunzaker · 2017-07-13T22:32:05Z

Well if you put it that way.

gaearon · 2017-07-14T10:53:29Z

It's yours! Look at what we did for previous releases: merge things to a branch freshly based of 15-stable, let me know when it's ready and we can get it out.

gaearon · 2017-07-16T19:16:00Z

src/renderers/dom/shared/inputValueTracking.js

-}
-
-function getValueFromNode(node) {
+function getValueFromNode(node: any) {


In general we should avoid adding any wherever possible. It very often leads to bugs. I know we used it sometimes, but I just want to point out for future reviews that it should be used only as last measure.

(I don’t mean this particular case is problematic, but this is something to always keep in mind.)

gaearon · 2017-07-16T19:18:23Z

src/renderers/dom/shared/inputValueTracking.js

  },

-  updateValueIfChanged(inst: InstanceWithWrapperState | Fiber) {
-    if (!inst) {
+  updateValueIfChanged(subject: SubjectWithWrapperState | Fiber) {


Was there any specific reason for changing terminology here? Did inputs change? Or was existing terminology inconsistent? In Stack, we used instance for internal instance, but in Fiber we use it for abstract renderer-specific instance (such as DOM node in case of ReactDOM). So both seemed fitting to me.

The inputs changed as far as I can know. The only place this was called otherwise was in the ChangeEventPlugin where it's just called an "instance" It may very well be a DOM node there in Fiber (now that I think of it). The need for the logic branch here is that we need the actual DOM node, and to handle both renderers that means calling getNodeFromInstance which seems to be fairly unforgiving of you passing in a node already, which I think is somerhow what's happening

As for the terminology it was more to save line space instead of writing InstanceWithWrapperState | ElementWithWrapperState in a few places.

Do I understand correctly that now the code supports passing three different types? Stack instance, Fiber, and a DOM node.

TBH I don't know what the Fiber type is/does here. I didn't add the types originally and AFAICT its never passed a Fiber, only an instance or Dom node

Hmm. I was under impression it was always passed a Fiber or a Stack instance before this change. Since .tag check is for detecting Fibers.

That may be! I still unfamiliar with the Fiber data types but the only place this is called is is ChangeEventPlugin with the targetInst parameter and DOMComponent. I'm unsure what the case is in the changeEventPlugin.

Is the Fiber situation that sometimes it may be an "instance" (DOM Node) and sometimes it may be a "Fiber". In the Stack case it's always an internal Instance

I'll check that, thanks.

gaearon · 2017-07-16T19:21:29Z

src/renderers/dom/shared/inputValueTracking.js

+
+    // TODO: remove check when the Stack renderer is retired
+    if ((subject: any).nodeType !== ELEMENT_NODE) {
+      node = ReactDOMComponentTree.getNodeFromInstance(subject);


Could you explain more about why this change is necessary? I still don’t quite get why it was called unconditionally, but now is called conditionally, even though subject (aka inst) type has not changed (or has it?)

Oops, I misread. I now see that previous code also had (a different) check. I wonder if changing that check is what caused the issue. I'm still not sure why though.

Hmm no I didn’t misread 😛

This does look like a new check. So my previous comment still stands.

more in the comment above, but the check is purely to avoid calling getNodeFromInstance when inst is already a Node, as in the Fiber case. The only reason it was added was to handle both renderers, You can see in backport PR that this file isn't even touched (i'm guessing that one probably doesn't suffer this bug btw)

jquense added 2 commits July 12, 2017 11:50

Add fixture

ce70f13

Fix Uncontrolled radio groups

25cff31

facebook-github-bot added the CLA Signed label Jul 12, 2017

jquense commented Jul 12, 2017

View reviewed changes

aweary mentioned this pull request Jul 12, 2017

React 15.6.2 Umbrella #10040

Closed

12 tasks

gaearon reviewed Jul 12, 2017

View reviewed changes

jquense added 2 commits July 12, 2017 12:29

address feedback

84bda97

Merge branch 'master' into fix-uncontrolled-radios

48fc77f

fix tests; prettier

15228e8

nhunzaker suggested changes Jul 13, 2017

View reviewed changes

Update TestCase.js

dede4b6

nhunzaker approved these changes Jul 13, 2017

View reviewed changes

nhunzaker merged commit 999df3e into facebook:master Jul 13, 2017

This was referenced Jul 14, 2017

Fix uncontrolled radios jquense/react#3

Closed

Fix uncontrolled radios #10186

Merged

facebook deleted a comment from EastHJ Jul 14, 2017

gaearon mentioned this pull request Jul 16, 2017

Uncontrolled radio fix is breaking master #10196

Closed

gaearon reviewed Jul 16, 2017

View reviewed changes

This was referenced Aug 26, 2019

[Snyk] Upgrade react from 15.4.2 to 15.6.2 T0mmykn1fe/blueocean-plugin#3

Open

[Snyk] Upgrade react-dom from 15.4.2 to 15.6.2 T0mmykn1fe/blueocean-plugin#4

Open

This was referenced Sep 4, 2019

[Snyk] Upgrade react from 15.6.1 to 15.6.2 jakeherp/rsvp-app#2

Merged

[Snyk] Upgrade react-dom from 15.6.1 to 15.6.2 jakeherp/rsvp-app#3

Merged

snyk-bot mentioned this pull request Feb 9, 2020

[Snyk] Upgrade react from 15.4.1 to 15.6.2 NetanelHadas/react-native-albums#1

Open

snyk-bot mentioned this pull request Mar 3, 2020

[Snyk] Upgrade: react, react-dom judynjagi/Bucketlist-React-Redux-WebApplication#1

Open

This was referenced Mar 18, 2020

[Snyk] Upgrade: react, react-dom O330oei/sharetribe#3

Merged

[Snyk] Upgrade: react, react-dom godaddy/svgs#51

Closed

[Snyk] Upgrade react from 15.3.1 to 15.6.2 ImranSaadi/react-native-admob#10

Merged

This was referenced Mar 27, 2020

[Snyk] Upgrade: react, react-dom karlhorky/talks#12

Closed

[Snyk] Upgrade: react, react-dom dmitriz/react-pure-component-starter#1

Open

This was referenced Apr 7, 2020

[Snyk] Upgrade react from 15.2.1 to 15.6.2 rangle/react-native-workshop-1#1

Open

[Snyk] Upgrade react from 15.0.2 to 15.6.2 rangle/react-native-workshop#64

Open

[Snyk] Upgrade react from 15.3.1 to 15.6.2 rangle/NavigationExperimentalWorkshop#2

Open

This was referenced May 6, 2020

[Snyk] Upgrade: react, react-dom yamafaktory/babel-react-rollup-starter#117

Open

[Snyk] Upgrade: react, react-dom yamafaktory/buble-react-rollup-starter#95

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix uncontrolled radios #10156

Fix uncontrolled radios #10156

jquense commented Jul 12, 2017

jquense Jul 12, 2017

jquense Jul 12, 2017

gaearon Jul 12, 2017

jquense Jul 12, 2017

gaearon Jul 12, 2017

jquense Jul 12, 2017

gaearon Jul 12, 2017

jquense Jul 12, 2017

gaearon commented Jul 12, 2017

jquense commented Jul 12, 2017

jquense commented Jul 12, 2017

nhunzaker commented Jul 12, 2017

nhunzaker left a comment

nhunzaker Jul 13, 2017

jquense Jul 13, 2017

nhunzaker commented Jul 13, 2017

jquense commented Jul 13, 2017

nhunzaker commented Jul 13, 2017

gaearon commented Jul 13, 2017

nhunzaker commented Jul 13, 2017

gaearon commented Jul 14, 2017

gaearon Jul 16, 2017

gaearon Jul 16, 2017

jquense Jul 16, 2017

gaearon Jul 16, 2017

jquense Jul 17, 2017 •

edited

gaearon Jul 17, 2017

jquense Jul 17, 2017

gaearon Jul 17, 2017

gaearon Jul 16, 2017

gaearon Jul 16, 2017

gaearon Jul 16, 2017

jquense Jul 16, 2017

Fix uncontrolled radios #10156

Fix uncontrolled radios #10156

Conversation

jquense commented Jul 12, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Jul 12, 2017

jquense commented Jul 12, 2017

jquense commented Jul 12, 2017

nhunzaker commented Jul 12, 2017

nhunzaker left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nhunzaker commented Jul 13, 2017

jquense commented Jul 13, 2017

nhunzaker commented Jul 13, 2017

gaearon commented Jul 13, 2017

nhunzaker commented Jul 13, 2017

gaearon commented Jul 14, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jquense Jul 17, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jquense Jul 17, 2017 •

edited