Coder Social home page Coder Social logo

Comments (11)

sebmarkbage avatar sebmarkbage commented on May 21, 2024 1

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.

sebmarkbage avatar sebmarkbage commented on May 21, 2024 1

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.

sebmarkbage avatar sebmarkbage commented on May 21, 2024 1

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.

rickhanlonii avatar rickhanlonii commented on May 21, 2024

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.

sebmarkbage avatar sebmarkbage commented on May 21, 2024

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.

rickhanlonii avatar rickhanlonii commented on May 21, 2024

@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.

sebmarkbage avatar sebmarkbage commented on May 21, 2024

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.

sebmarkbage avatar sebmarkbage commented on May 21, 2024

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.

sebmarkbage avatar sebmarkbage commented on May 21, 2024

I'm still confused why we don't end up in our event handler which calls preventDefault though.

from react.

rickhanlonii avatar rickhanlonii commented on May 21, 2024

@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.

HermanBide avatar HermanBide commented on May 21, 2024

has this been solved ? if no, can i contribute?

from react.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.