Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Number input goes into infinite loop when Chrome debugger on #6506

Closed
eipark opened this issue Apr 13, 2016 · 11 comments
Closed

Number input goes into infinite loop when Chrome debugger on #6506

eipark opened this issue Apr 13, 2016 · 11 comments

Comments

@eipark
Copy link

eipark commented Apr 13, 2016

Possibly related to: #1549

On Mac, Chrome 49.

I have a pretty standard number input like so:

<input type='number' step='0.01' min='0' onChange={someCallback} value={value}/>

When I click the arrow in the input field to change the number, it works properly. However when I open the Chrome inspector and throw a breakpoint somewhere in my rendering flow, I get into an infinite loop where the value of the input field keeps incrementing. It's possible this may be a chrome bug as well.

Stack trace showing how it's looping:
image
@gaearon
Copy link
Collaborator

gaearon commented Apr 13, 2016

Would you mind reproducing this in JSFiddle? Thanks.

@jimfb
Copy link
Contributor

jimfb commented Apr 15, 2016

Ping @eipark

@eipark
Copy link
Author

eipark commented Apr 15, 2016

Not sure if this is reproduceable with a jsfiddle since you need to set a breakpoint in the chrome debugger.

@jimfb
Copy link
Contributor

jimfb commented Apr 15, 2016 •
edited
Loading

Can you modify and post the code from one of the examples in the React starter pack, to create a simplified repro, with instructions on how to reproduce?

@eipark
Copy link
Author

eipark commented Apr 15, 2016

Sure. Here is the basic-jsx-external example with a modified example.js:

var ExampleApplication = React.createClass({
  getInitialState() {
    return {value: 3.0};
  },
  render: function() {
    var elapsed = Math.round(this.props.elapsed  / 100);
    var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
    var message =
      'React has been successfully running for ' + seconds + ' seconds.';

    // Set a breakpoint here in Chrome and click the arrow on the input field
    return (
      <div>
        <p>{message}</p>
        <input type='number' step='0.01' min='0.0' value={this.state.value} onChange={(e) => {this.setState({value: e.target.value})}}/>
      </div>
    );
  }
});

var start = new Date().getTime();

setInterval(function() {
  ReactDOM.render(
    <ExampleApplication elapsed={new Date().getTime() - start} />,
    document.getElementById('container')
  );
}, 50);

I was able to repro the bug with this setup.

@jimfb
Copy link
Contributor

jimfb commented Apr 18, 2016 •
edited
Loading

Ok, nice repro! I was able to reproduce. @spicyj immediately said "Chrome bug!" as soon as he saw it, maybe he is right. Interestingly, the Firefox debugger behaves even worse than Chrome does.

Commenting out the fake-dom-node-event-logic seems to fix the issue.

@jimfb jimfb self-assigned this Apr 18, 2016
@jimfb
Copy link
Contributor

jimfb commented Apr 18, 2016

Actually, I take that back, perhaps it is not related to the fake-dom-node-logic. I was overly excited, commenting it out doesn't appear to have done anything :(.

@jimfb jimfb removed their assignment Apr 18, 2016
@nhunzaker
Copy link
Contributor

nhunzaker commented Aug 6, 2016 •
edited
Loading

This appears to be a bug in Chrome:

loop

Using:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <input type="number" step="0.01" min="0" value="3" />
    <script>
      document.querySelector('input').addEventListener('input', function(e) {
        // Break here!
        console.log(e.target.value);
      })
    </script>
  </body>
</html>

Chrome continues to dispatching a new input event until another event is fired. If the mouse moves, or a key is pressed, the loop halts.

@nhunzaker
Copy link
Contributor

Went ahead and filed an issue: https://bugs.chromium.org/p/chromium/issues/detail?id=635244&can=2&start=100&num=100&q=breakpoint&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

@sophiebits
Copy link
Contributor

Thanks @nhunzaker!

@nhunzaker
Copy link
Contributor

Fixed in Chrome!
https://bugs.chromium.org/p/chromium/issues/detail?id=635244&can=2&start=100&num=100&q=breakpoint&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@sophiebits @nhunzaker @eipark @gaearon @jimfb