For now SlidePanel goes though all elements that have data-rel="close" in the children (through real dom) and add native click event listener for them. I see it as convenient solution to have close button in any place of SlidePanel. I propose to update the implementation just to more explicit way.
Steps to reproduce
We found several issues:
When children content will be re-rendered - subscription can be lost.
Next code is used as an example but shows possible issue in the future. In react child ComponentDidMount calls first - then parent one. It means that child component close button will have two handlers.
I propose to try component as a function approach here to pass close handlers to the children. Please comment if you have better or alternative solutions!
<SlidePanel>
{(close) => {
return (
... some content
<button onClick={close} />
... some content
);
}}
</SlidePanel>
Description
For now SlidePanel goes though all elements that have
data-rel="close"
in the children (through real dom) and add native click event listener for them. I see it as convenient solution to have close button in any place of SlidePanel. I propose to update the implementation just to more explicit way.Steps to reproduce
We found several issues:
ComponentDidMount
calls first - then parent one. It means that child component close button will have two handlers.Proposal
I propose to try
component as a function
approach here to pass close handlers to the children. Please comment if you have better or alternative solutions!