Skip to content

Commit 365cb32

Browse files
committed
fix(withPortal): ensure component is re-rendered when portal has been found
otherwise the children are never mounted inside the web component and the child app does not work interactive
1 parent a701f05 commit 365cb32

File tree

1 file changed

+11
-4
lines changed

1 file changed

+11
-4
lines changed

src/browser/withPortal.jsx

+11-4
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,17 @@ export default function toReact(
6060
};
6161
}
6262
}
63+
state = {};
6364
getRef = () => {
6465
return this.props.forwardedRef || this.ref;
6566
};
66-
ref = createRef();
67+
setRef = (ref) => {
68+
this.getRef().current = ref;
69+
70+
this.setState({
71+
portal: this.findPortal(ref),
72+
});
73+
};
6774
findPortal = memorizeOne((ref) => {
6875
const portal = ref.querySelector(Portal);
6976

@@ -73,14 +80,14 @@ export default function toReact(
7380

7481
return portal;
7582
});
83+
ref = createRef();
7684
render() {
7785
const { children, ...rest } = this.props.hostProps;
7886

7987
return (
8088
<Fragment>
81-
{this.getRef().current &&
82-
createPortal(children, this.findPortal(this.getRef().current))}
83-
<WebComponent {...rest} ref={this.getRef()} {...this.wcProps} />
89+
{this.state.portal && createPortal(children, this.state.portal)}
90+
<WebComponent {...rest} ref={this.setRef} {...this.wcProps} />
8491
</Fragment>
8592
);
8693
}

0 commit comments

Comments
 (0)