Fix the "checked" attribute is not initially set on the input #13114

dilidili · 2018-06-27T08:39:31Z

Fix issue #12765

nhunzaker

Thanks for sending this in!

I want to see if we can simplify the DOM operations by directly assigning our pre-computed initial checked value to node.defaultValue. Is this something you could look into?

nhunzaker · 2018-06-27T12:42:00Z

packages/react-dom/src/client/ReactDOMFiberInput.js

+  // Set the "checked" attribute initially.
+  if (props.hasOwnProperty('defaultChecked') && !!props.defaultChecked) {
+    node.setAttribute('checked', 'checked');
+  }


I wonder if lines 245-250 could be replaced with:

node.defaultChecked = node._wrapperState.initialChecked

You are right. The node._wrapperState.initialChecked will simplify the DOM operations.

nhunzaker · 2018-06-28T14:25:51Z

packages/react-dom/src/client/ReactDOMFiberInput.js

  }
-  node.defaultChecked = !node.defaultChecked;
+  node.defaultChecked = !node._wrapperState.initialChecked;
  node.defaultChecked = !node.defaultChecked;


What do you think about reversing these lines? I have a hard time tracking lots of boolean flipping. Do you think this would work?

node.defaultChecked = !node.defaultChecked; node.defaultChecked = node._wrapperState.initialChecked;

Remind me again why we set defaultChecked twice, is it related to value detachment? It'd be great if we could add a comment here explaining the reasoning.

@aweary Actually I don't know either, but I aired on the side of avoiding speculation, haha. I can do some testing to see if we really need this.

A lot of the value detachment stuff was added when defaultValue was assigned as an attribute through DOMPropertyOperations. I think those edge cases went away when we moved everything into ReactDOMInput.

The thing to figure out is if assignment detaches, or if the value truly must be different. It would be easy to run a few tests.

I think we set defaultChecked twice for solving Checkbox checked state is erroneously influenced by value of defaultChecked in Chrome.

test:

+<!DOCTYPE html> +<html> +<head> +<script src="../../../resources/testharness.js"></script> +<script src="../../../resources/testharnessreport.js"></script> +</head> +<body> +<script> +test (function() { + var el = document.createElement("input"); + el.setAttribute("type", "checkbox"); + el.defaultChecked = true; + el.checked = true; + el.defaultChecked = false; + assert_true(el.checked); +}, "This test check that checked state of checkbox once explicitly set is not affected by default state."); +</script> +</body> +</html>

diff:

void HTMLInputElement::setChecked(bool nowChecked, TextFieldEventBehavior eventBehavior) { + m_reflectsCheckedAttribute = false; if (checked() == nowChecked) return; - m_reflectsCheckedAttribute = false; m_isChecked = nowChecked; if (RadioButtonGroupScope* scope = radioButtonGroupScope())

The purpose of the first assignment is set the m_reflectsCheckedAttribute to false. So, both of our codes work.

That is a good enough answer for me, 👍

Still, just to keep the boolean flipping in check, is it possible to do this:

node.defaultChecked = !node.defaultChecked; node.defaultChecked = node._wrapperState.initialChecked;

?

@nhunzaker updated.

And i changed test case because of which i found:
if a <input /> is neither checkbox nor radio, input.defaultChecked = true will call input.setAttribute('checked', '') but input.getAttribute('checked') still be null. Thereafter, input.defaultChecked = false will not call input.setAttribute on the uncheckable input.

nhunzaker

This looks good to me. I just left a final change requesting the use of hasAttribute over comparing getAttribute.

Thanks for sending this in!

nhunzaker · 2018-06-29T11:16:32Z

packages/react-dom/src/__tests__/ReactDOMInput-test.js

+    expect(aNode.getAttribute('checked')).toBe('');
+    expect(bNode.getAttribute('checked')).toBe(null);
+    expect(cNode.getAttribute('checked')).toBe('');
+


Sorry, I think one last change. This looks good overall.

Can you change this test to use hasAttribute instead of doing a value check on getAttribute? Like:

expect(aNode.hasAttribute('checked')).toBe(true);

That makes sense, Updated.

nhunzaker · 2018-06-29T11:27:11Z

packages/react-dom/src/client/ReactDOMFiberInput.js

  }
  node.defaultChecked = !node.defaultChecked;
-  node.defaultChecked = !node.defaultChecked;
+  node.defaultChecked = !!node._wrapperState.initialChecked;


Just trying to think through all of the cases here:

checked or defaultChecked are true

node.defaultChecked = true // node.defaultChecked = !node.defaultChecked node.defaultChecked = true // node.defaultChecked = !!false

checked or defaultChecked are false

node.defaultChecked = true // node.defaultChecked = !node.defaultChecked node.defaultChecked = false // node.defaultChecked = !!false

checked and defaultChecked are undefined

This can happen if you just declare a regular text input, ex: <input value="test" />

In this case, value detachment still needs to occur. An input might switch from text to radio later, and React doesn't fire the post mount hook behavior when that happens.

node.defaultChecked = true // node.defaultChecked = !node.defaultChecked node.defaultChecked = false // node.defaultChecked = !!undefined

So I think this is good to go. Are there any other cases you can think of?

Separately, part of me wonders if node._wrapperState.initialChecked should always be a boolean. Like we should do the !!node._wrapperState.initialChecked part when initialChecked is assigned.

However I don't think that's related to this issue, and I'm not sure what existing code relies on that value to be loosely null.

Haha, i tried and got a Flow type check error.

Cannot assign node._wrapperState.initialChecked to node.defaultChecked because property defaultChecked is missing in object type.

Yeah. One thing at a time. I think this is a great follow-up, but I'd love to get this check attribute fix in first.

nhunzaker · 2018-06-29T11:37:26Z

packages/react-dom/src/__tests__/ReactDOMInput-test.js

      'node.value = "1980-01-01"',
      'node.setAttribute("value", "1980-01-01")',
      'node.setAttribute("checked", "")',
-      'node.setAttribute("checked", "")',


Just so I can better understand this change, is the reduction of this setAttribute call due to the following case?

checked or defaultChecked are true

// <input defaultChecked=true} /> node.defaultChecked = true // node.defaultChecked = !node.defaultChecked node.defaultChecked = true // node.defaultChecked = !!true

Sorry. Didn't catch your comment earlier. This makes sense!

…et on the input

nhunzaker

This looks great from my end. I'll do some manual QA just to feel things out across a few browsers, but this is good as far as I'm concerned.

@aweary any thoughts?

nhunzaker · 2018-07-04T20:00:32Z

Did some testing. This looks great.

Thanks @dilidili!

facebook-github-bot added the CLA Signed label Jun 27, 2018

nhunzaker suggested changes Jun 27, 2018

View reviewed changes

dilidili force-pushed the defaultCheckedProps branch from 136bea6 to 3e8ca2f Compare June 28, 2018 02:27

nhunzaker reviewed Jun 28, 2018

View reviewed changes

dilidili force-pushed the defaultCheckedProps branch 3 times, most recently from b56f29d to 146bb96 Compare June 29, 2018 02:58

nhunzaker suggested changes Jun 29, 2018

View reviewed changes

Fix - issue facebook#12765 / the checked attribute is not initially s…

a3b6d44

…et on the input

dilidili force-pushed the defaultCheckedProps branch from 146bb96 to a3b6d44 Compare June 29, 2018 13:22

nhunzaker approved these changes Jun 29, 2018

View reviewed changes

nhunzaker merged commit 85fe4dd into facebook:master Jul 4, 2018

nhunzaker mentioned this pull request Jul 4, 2018

defaultChecked prop sets only checked attribute #12765

Closed

gaearon mentioned this pull request Aug 7, 2018

Update attribute table #13343

Merged

gaearon mentioned this pull request Sep 5, 2018

Changelog for 16.5.0 #13571

Merged

billyvg mentioned this pull request Sep 14, 2018

chore(react): Upgrade to 16.5.1 getsentry/sentry#9686

Merged

ghost mentioned this pull request Oct 1, 2018

Update react-dom in /modules/frontend from 16.3.0 to 16.5.2 project-accelerate/accelerate#277

Open

This was referenced Nov 1, 2018

Update react-dom in / from 16.2.0 to 16.6.0 leonardofaria/leozera-ui#253

Closed

Update react in / from 16.2.0 to 16.6.0 leonardofaria/leozera-ui#254

Closed

This was referenced Dec 1, 2018

Update react-test-renderer in /modules/frontend from 16.3.0 to 16.6.3 project-accelerate/accelerate#312

Open

Update react in /modules/frontend from 16.3.0 to 16.6.3 project-accelerate/accelerate#313

Open

aviklai mentioned this pull request Apr 18, 2019

Print with check box checked MatthewHerbst/react-to-print#66

Closed

This was referenced Sep 5, 2024

[Snyk] Fix for 104 vulnerabilities Omrisnyk/lock-walker#65

Open

[Snyk] Fix for 104 vulnerabilities Omrisnyk/lock-walker#66

Open

Fix the "checked" attribute is not initially set on the input #13114

Fix the "checked" attribute is not initially set on the input #13114

Uh oh!

Conversation

dilidili commented Jun 27, 2018

Uh oh!

nhunzaker left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dilidili Jun 28, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nhunzaker left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dilidili Jun 29, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nhunzaker left a comment

Choose a reason for hiding this comment

Uh oh!

nhunzaker commented Jul 4, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

dilidili Jun 28, 2018 •

edited

Loading

dilidili Jun 29, 2018 •

edited

Loading