Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

component prevents from triggering host form#onSubmit

See original GitHub issue



Steps to reproduce

<form onSubmit="() => console.log('on-submit')">
          placeholder="Choose a state..."

Expected Behavior

should trigger onSubmit handler.

Actual Behavior

does nothing

I have fixed this problem before but it seem this bug returned again

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:14 (12 by maintainers)

github_iconTop GitHub Comments

ericgiocommented, Mar 13, 2019

@hyzhak: I know it’s not ideal, but I think the workaround above should address your use case. Assuming that’s true, I’m going to close this issue as resolved. Let me know if I’m missing something, however.

ericgiocommented, Dec 14, 2018

The behavior you were seeing before was unintended, if not an outright bug, so what you’re asking for is really a new feature that allows users to make arbitrary selections when hitting enter. It’s unlikely I’ll add that as a first-class piece of the API, but it should currently be possible to achieve what you’re after. For example, you could use the typeahead’s onKeyDown listener to submit the form when the user hits enter:

<form ref={form => this._form = form}>
    onKeyDown={(e) => {
      if (e.keyCode === 13) {
  <button type="submit">
Read more comments on GitHub >

github_iconTop Results From Across the Web

React - Preventing Form Submission - Stack Overflow
In javascript you can prevent that by using an event handler and calling e.preventDefault() on button click, or form submit. e is the...
Read more >
How do I trigger recordEditForm onSubmit event using ...
I was looking at workaround online and it's suggested to hide a button inside the recordEditForm and to click that using Javascript, which...
Read more >
Communicating with Iframes - Medium
The first thing we need to do to establish the connection between our iframe file and its host is to trigger a message...
Read more >
Bootstrap React Forms - part 2, validation and errors
This React Bootstrap form example covers validating the form fields, showing error messages, and handling the react bootstrap form submit.
Read more >
How To Call Web APIs with the useEffect Hook in React
To understand why you should check if the component is mounted before setting the data, see Step 2 — Preventing Errors on Unmounted ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found