Comments (6)
As far as I an tell this also repros without toggling disabled
: https://codesandbox.io/s/react-canary-radio-buttons-forked-ydjdlp?file=/src/App.js
So it's just about changing the controlled checked
delayed.
from react.
The problem was introduced with 18.3.0-next-1f248bdd7-20230419
. The previous version 18.3.0-next-d962f35ca-20230418
works.
from react.
It looks like it was this change that introduced this bug: #26667
from react.
what are ways to fix this issue?
from react.
FYI, I find something by investigating, as below:
extractEvents
:
react/packages/react-dom-bindings/src/events/plugins/ChangeEventPlugin.js
Lines 322 to 331 in 6aacd3f
onChange
isn't called because inst
here is falsy in that process. PS: In our case, getTargetInstFunc
should be equal to getTargetInstForClickEvent
.
Diving into the inner functions as the followings.
getTargetInstForClickEvent
:
react/packages/react-dom-bindings/src/events/plugins/ChangeEventPlugin.js
Lines 117 to 122 in 6aacd3f
updateValueIfChanged
:
react/packages/react-dom-bindings/src/client/inputValueTracking.js
Lines 141 to 147 in 6aacd3f
tracker
:
react/packages/react-dom-bindings/src/client/inputValueTracking.js
Lines 103 to 111 in 6aacd3f
We can find the key is that the tracked value should be different from the value get from node
(getValueFromNode(node)
) in our case. We can believe the tracked value was not updated after the delayed state change, which cause the issue.
Analysis by reproduction steps (Please visit this demo, which can print the tracked values):
- Initially:
- One: checked (
getValueFromNode(node)
is'true'
), and the tracked value is'true'
- Two: unchecked, and the tracked value is
'false'
- One: checked (
- Click 'Two', and wait for delayed
setValue
:onChange
is called- One: unchecked, and the tracked value is
'false'
- Two: checked, and the tracked value is
'true'
- One: unchecked, and the tracked value is
- Click 'One', and wait for the delayed
setValue
:onChange
is called- One: checked, and the tracked value is
'true'
- Two: unchecked, and the tracked value is
'true'
- One: checked, and the tracked value is
- Click 'Two', won't call
onChange
again
PS: The tracked value can be updated at the end of the event handler (by restoreControlledInputState
), so Step 2 will result in the correct tracked values.
So, I think one solution is to update the tracked value (at the end of the commit mutation phase) when the checked prop changes.
I'd like to submit a PR to fix it. Any corrections or suggestions will be appreciated, (for I'm not sure if I miss anything important).
from react.
I tried another way to understand what caused the bug.
I just checked the diff between a working commit (d962f35) and non-working commit (1f248bd) and figured out that the bug happens after removing this lines of code in updateProperties()
function of packages/react-dom-bindings/src/client/ReactDOMComponent.js
.
just restoring
const checkedValue = nextProps.defaultChecked;
const inputElement: HTMLInputElement = (domElement: any);
inputElement.checked =
!!checkedValue &&
typeof checkedValue !== 'function' &&
checkedValue !== 'symbol';
or just adding domElement.checked = checked;
the bug disappear.
Maybe the problem is explained in this comment
* If `checked` or `value` are not supplied (or null/undefined), user actions
* that affect the checked state or value will trigger updates to the element.
*
* If they are supplied (and not null/undefined), the rendered element will not
* trigger updates to the element. Instead, the props must change in order for
* the rendered element to be updated.
inputElement.checked
is not updated and will result null/undefined and the radio is no more controlled?
You can check this branch. I've also made a change to packages/react-devtools-shell/src/e2e-apps/ListApp.js
to start devtools server with a simple radio example.
To run the server:
- run
yarn
in the root directory and inpackages/react-devtools-inline
directory. - from to the root directory run
yarn build-for-devtools
- from
packages/react-devtools-shell
folder executeyarn start
(better to open another shell for this command) - go to http://localhost:8080/e2e.html
React.b.mov
from react.
Related Issues (20)
- [DevTools Bug]: React devtool is not there in codesandbox HOT 1
- Feature request: context propagation throughout component tree without Context API or prop drilling (like Vue's provide/inject API) HOT 10
- Bug: Streaming Hydration fails when promise is created within a suspense-wrapped component
- [DevTools Bug]: footer next button hover Ui issues HOT 1
- [DevTools Bug] getCommitTree(): Invalid commit "13" for root "1". There are only "7" commits. HOT 1
- [DevTools Feature Request]: Full support for RSC server elements (component tree, props, inspect)
- [DevTools Bug]: Cannot read properties of undefined (reading 'toLowerCase') HOT 2
- Bug: test HOT 3
- [DevTools Bug]: Extension breaks PRTG web interface HOT 2
- A lengthy task in a resource-intensive application.
- Bug: Codeblocks are going over the normal width of the content , which seems really off HOT 1
- Add `x_google_ignoreList` (Ignore-listing code) support to sourcemaps HOT 2
- Bug: useRef on react-test-renderer wont work HOT 1
- Bug: NOTHING BIG
- Bug: putting promise into JSX will cause hydration issue HOT 11
- Bug: Pressing `enter` on an input to submit the form submits the first button instead of the form itself (With Actions) HOT 5
- [DevTools Bug] Cannot remove node "434" because no matching node was found in the Store. HOT 1
- Bug: 40k modules in npm, fix that. PLEASE!!!!!
- [DevTools Bug]: Recent version broke modal in chrome browser HOT 1
- Bug: Uncaught TypeError: Cannot read properties of null (reading 'useContext') when importing react-router-dom HOT 24
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.