child visible property toggles from true to false without re-render

[MichaelRando]

trafficstars

In my test project: https://github.com/MichaelRando/preact-rollup-bootstrap pressing button 'Test Dialog' displays a test dialog, by virtue of setting the state variable to true and the Dialog's visible property is set to said state. Clicking off or closing the dialog is expected to hide the dialog's view. When using react & react-dom, the dialog appears and disappears as many times as the user could want, successfully. When using preact & preact-compat, the dialog appears successfully, but closing / setting the visible state false has no effect. The Dialog component is not re-rendering as React compatibility would expect. This is a super basic test; not sure why this is happening.

[developit]

It is re-rendering, just it's not closing the dialog. this seems to be an incompatibility with rc-dialog / css-transition-group. I understand your frustration, but bear in mind that while the demo code might be basic, it's relying on a fairly large external library. The complexity/intricacy is hidden.

I've been debugging so far and haven't found much, I'll post back here when I do.

[MichaelRando]

Weird. I assumed it was vdom issue because I wasn't getting breakpoints (update/render) in the child upon parent state change. But I'm not surprised it's a tip of iceberg, otherwise nothing would work...

[luolonghao]

this seems to be an incompatibility with css animation, I try to modify animation-duration to 0s, the rc-dialog is not re-rendering when close dialog.

https://github.com/ant-design/ant-design-mobile/blob/master/components/style/anim.less#L4

[luolonghao]

I use chrome-devtools debug it, the cause is the className of animation is removed before remove the div element, so may be this is not preact bug.

[luolonghao]

I found why remove element have delay, when remove setTimeout in the following code, the dialog is not re-rendering. @developit

// render-queue.js:10
(options.debounceRendering || setTimeout)(rerender);

[developit]

Yes. We need to switch back to Promise.then for denouncing.

[luolonghao]

Yes. need to revert https://github.com/developit/preact/commit/78014124593997d749e50ea1291a3c18731f1fe4

[luolonghao]

https://github.com/developit/preact/commit/576dda310a8e31e524fa2ecc803d6d406597c41e