Comments (13)
Also, it's a common bug of error dialogs to treat window.onerror
as a pop up, and console.error
not, so you get confused by a later error. This is a bug in CodeSandbox or maybe it's CRA?
from react.
well, if it's dev only we can also just disable all error logging after the first error in that case. But seems unnecessary since you should act on the first one and the other consequences can be important to dig into. So it's mainly a UI problem in the DX.
from react.
It guess the issue is that the browser stops propagation and doesn't let the submit event bubble up (which makes sense since it might fire the submit event on the parent which isn't right).
So it's as if the browser calls stopPropagation().
If we didn't use event delegation for these, we might have a way to intercept it but that has other consequences. So maybe we just wait to fix this until we fix the rest of the event system.
from react.
Ideas for better errors:
If we block either form from submitting (current behavior):
Multiple forms attempted to submit, actions in nested
<form>
elements block all actions from submitting
If we call the top-most action, similar to the browser behavior:
Multiple forms attempted to submit, actions in nested
<form>
elements are ignored
from react.
The general issue is we don’t want to pay the cost of dom nesting checks in prod. It’s a penalty to everyone that actually reads their logs and fixes their bugs.
The important bit is that the log needs to come first.
from react.
@sebmarkbage one idea I had is that during hydration, we could change the form action string to javascript:throw new Error('Multiple forms attempted to submit, actions in nested <form> elements block all actions from submitting.')
.
Would that also be expensive, and could that be done in a way that only de-opts if you use the nested pattern (so the correct pattern doesn't pay the cost)?
from react.
That would typically not be correct because the common reason to hit this code path is what it says in the original string, not nested forms.
from react.
We don't have too many ways to fix this because we have to be in the bubble phase 'submit'
handler to play well with the rest of the event system. Additionally, it should ideally play with the Navigation API which would replace our current implementation.
So we can't just add any semantics we want.
We also have limited options to detect this is even what is happening.
from react.
I'm still confused why we don't end up in our event handler which calls preventDefault though.
from react.
@sebmarkbage what i was thinking is in createInstance
if validateDOMNesting
is false, we walk back up the tree and change the string for all parent forms (so it only changes if you are doing the nesting, all other cases show the original error).
But I guess what you mean is if you did submit incorrectly outside of the nested form, so it goes directly to the parent form, then the original error would be correct. Showing the nested error would be wrong when you did this:
function Component() {
return (
<form>
<form>
// this should show the nested error
<Button />
</form>
// this should show the original error
<ButtonWithBadSubmit />
</form>
)
}
so there's not a good way to fix this case which doesn't impact the other cases
from react.
has this been solved ? if no, can i contribute?
from react.
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
from react.
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!
from react.
Related Issues (20)
- [React 19] useSyncExternalStore shim might break HOT 8
- [React 19] `use` is significantly slower in some scenarios than throwing a Promise HOT 10
- Bug: useState is not getting updated inside Event Listener (Webrtc DataChannel). HOT 2
- [React 19] Controlled number input does not update defaultValue when value prop has changed HOT 4
- Bug: onPointerDown not called when rendered in 'display: contents' root HOT 4
- [Compiler Bug]: Compiler incorrectly removes memoization of an expensive operation in useMemo HOT 3
- [DevTools Bug]: Open in editor , Path not found error HOT 2
- Bug: Ref is set after componentDidMount (when mixing Class and Functional components) HOT 3
- [React 19] Disabling prerendering siblings of suspended components breaking common pattern HOT 16
- [Compiler Bug]: Constants or properties named `use*` trigger compiler errors re: hooks HOT 2
- [React 19] Using spread with binary conditional in JSX causes error in dev env for case of using legacy JSX transform HOT 3
- [DevTools Bug] Cannot add node "1" because a node with that id is already in the Store. HOT 1
- [React 19] When multiple components call `use` inside a `Suspense`, it crosses the boundary of `Suspense` and stops rendering of other `Suspense` as well HOT 2
- [Compiler]: Type inference information does not propagate past phi nodes HOT 1
- Bug: "Should not already be working" Error Provides No Information (Not Even the Name Indicates What's Wrong)
- [React 19] React-Dom bundle increase 200kb HOT 3
- Bug: Expected Static Flag Was Missing
- [React 19] useEffect does not re-fire on hot reload with React 19 and vite HOT 1
- Bug: Hundreds render of Suspense child with hydration error HOT 5
- Bug: Receiving `Error: Should have a queue. This is likely a bug in React. Please file an issue` on usage of `next-safe-action`'s `useAction` hook HOT 1
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.