diff --git a/packages/react/src/components/createInlineOverlayComponent.tsx b/packages/react/src/components/createInlineOverlayComponent.tsx index 3d4dab1fef..783ba5b495 100644 --- a/packages/react/src/components/createInlineOverlayComponent.tsx +++ b/packages/react/src/components/createInlineOverlayComponent.tsx @@ -78,10 +78,19 @@ export const createInlineOverlayComponent = ( * cleanup properly. */ this.ref.current?.addEventListener('didDismiss', (evt: any) => { - const wrapper = this.wrapperRef.current!; - this.ref.current!.append(wrapper); + const wrapper = this.wrapperRef.current; + const el = this.ref.current; - this.setState({ isOpen: false }); + /** + * This component might be unmounted already, if the containing + * element was removed while the popover was still open. (For + * example, if an item contains an inline popover with a button + * that removes the item.) + */ + if (wrapper && el) { + el.append(wrapper); + this.setState({ isOpen: false }); + } this.props.onDidDismiss && this.props.onDidDismiss(evt); }); diff --git a/packages/react/test-app/cypress/integration/overlay-components/IonPopover.spec.ts b/packages/react/test-app/cypress/integration/overlay-components/IonPopover.spec.ts index df39183deb..9a7eb880a6 100644 --- a/packages/react/test-app/cypress/integration/overlay-components/IonPopover.spec.ts +++ b/packages/react/test-app/cypress/integration/overlay-components/IonPopover.spec.ts @@ -18,4 +18,12 @@ describe('IonPopover', () => { cy.get('ion-popover ion-list-header').contains('Ionic'); }); + it('display popover and remove containing element', () => { + //show popover, remove containing item + cy.get('#openPopover').click(); + cy.get('#removeItem').click(); + + //verify popover is gone + cy.get('#popoverInItem').should('not.exist'); + }); }); diff --git a/packages/react/test-app/src/pages/overlay-components/PopoverComponent.tsx b/packages/react/test-app/src/pages/overlay-components/PopoverComponent.tsx index 6c0bfe9aa3..0d02dc53cd 100644 --- a/packages/react/test-app/src/pages/overlay-components/PopoverComponent.tsx +++ b/packages/react/test-app/src/pages/overlay-components/PopoverComponent.tsx @@ -30,6 +30,8 @@ const PopoverComponent: React.FC = () => { event: undefined, }); + const [renderItem, setRenderItem] = useState(true); + return ( @@ -70,6 +72,12 @@ const PopoverComponent: React.FC = () => { > Show Popover, hide after 250 ms + {renderItem && + Open + + setRenderItem(false)}>Remove Item + + } );