I'm using a field bound PCF on one form and it has on two different tabs and noticing bizarre behavior.
1. I click the first tab and PCF loads successfully.
2. I click the second tab and PCF loads but disappears
3. I go back to the first tab and see both instances of the PCF in one container
4. The first one still has it's correct state and they are obviously difference instances of the PCF but the second attached itself to the first container
It seems it is attaching to the original container when the second one is loading and not using the new container. I would've assumed the init method would've passed the new container for this tab. Any ideas on this, I'm assuming it's a lifecycle issue or old container being passed in during init.
My lifecycle:
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement) {
initializeIcons(undefined, { disableWarnings: true });
this._context = context;
this._notifyOutputChanged = notifyOutputChanged;
this._container = container;
}
public updateView(context?: ComponentFramework.Context<IInputs>): void {
ReactDOM.render(
React.createElement(TestPCF, this.props),
this._container
);
}
public destroy(): void {
ReactDOM.unmountComponentAtNode(this._container);
}
