react-sizeme fails to update size on resize event

[niwsa]

Sandbox up at https://codesandbox.io/s/r79nwzzv0n
Try resizing the sandbox preview window.
OS: Ubuntu 16.04,browser: Google chrome Version 70.0.3538.110 (Official Build) (64-bit)
Did I miss something the way I use sizeme?

[ctrlplusb]

Hey @niwsa - this is a very very strange bug. I have no idea why, but if you only put in the width then the resize events stop firing. If you add a "px" or any other content around the width then events do fire. I'm not sure if this issue is with React or one of my underlying dependencies. I did a large amount of debugging and couldn't see anything specific.

[ctrlplusb]

Here is your example working:
https://codesandbox.io/s/x7y9xz0l1o

FYI - codesandbox has a minimum width of 498px when I tested, so drag the panel wider than this when testing.

[niwsa]

@ctrlplusb Thank you for digging into this 👏 Yes I see the wierd behaviour with the events firing.Will try finding some spare time to investigate more.

[Kingdutch]

In case it helps anyone, I dove into this a little bit and detailed my thoughts here: https://gist.github.com/Kingdutch/db2cf90050aa13271fc968d8e87ad259

Don't expect much cohesiveness, I was trying to debug a problem that someone else posted in a discord without having react-sizeme set-up myself. But maybe my thoughts can help someone fix this :D

[agarwal]

if you only put in the width then the resize events stop firing

A bit more precisely, it's whether or not you create additional arguments to the createElement that JSX desugars to. For example, <div>{size.width + "px"}</div>} still causes broken behavior.

[ctrlplusb]

Thanks all, some valuable insight which I plan to parse.

The internals are quite stale now as I wrote this ages ago, when I was still a newcomer to React. ☺️ I plan on doing a refresh soon hopefully and will take into account.

I'll also consider the debugability of the code.

Shall ping back here when things progress. 🧚