emberjs / emberjs/ember.js

`in-element` helper doesn't fire destroy hooks on children when destinationElement is removed from DOM

Open
#20,710 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
22.6k
Forks
4.2k
Avg merge
3d 12h
Merged PRs (30d)
15

Description

### 🐞 Describe the Bug

If there are elements nested inside an `in-element` helper, they get rendered to a remote element defined by `destinationElement`. If this remote element is removed from the DOM, the elements nested inside the `in-element` helper are destroyed. However, their destroy hooks are not triggered.

This can cause leakage and stale reference exceptions to occur, because modifier and component destroy hooks did not get a chance to do cleanup.

### 🔬 Minimal Reproduction
[Glimdown reproduction](https://limber.glimdown.com/edit?c=JIOwBALgFgpmBOMAO8D2YBGMA2qDuANJLImAIakR7oCWAJjCBDQMZnZguoC2SqIjCAGdyIOpGph6g1uzDdUdGgDMaMeEIB0AKG0AJfDABu6ovzhde5pqPHn5ilWvjlSQwZHRkw1eNyio2HAArkI0IADmYAAG4QC0ODDcgtFgsNhI6jraAMLYrADW4VHQcBjBEBD8nhERQSJk4Cqc-ErM-OxEeFCsUAhJqCYipT6ofgFBYAAUDELMIGTtIACiQclMAJTZAHKoEHABeMRwsxBoAJ5g%2BcowLOcskwGoBSJ06CB7YDAAHrcVcMoxscWlYBDYgQolKp1MRFj51HBfP5AjA6JowAAVWCXfjYS4-P77MCAlwjLhMNAcSx8MEQWwOKHObJYmgiNjgNihOBBMgvKTgZbcLAuMhIJD5NhLIRELCc9zA04XK4qW73R6oZ4iAQmFzwRrEoEjJETVFfNaCLS6aLWiIAKxE%2BRM2hoVngdMFwpyPBpHmUaG4YAA5AABJLCgD01OsEEDAG5dC6%2BG6wF7Qb7-UHg3UXcl4JHvdG487XXSAN6QPUsAqmgC%2BxIzIez3Fz4bOZCrxSLibGZbA1Trfp4mbD6nDkKc6i7JbA5fH0JcA4bI-gcTnziL2nJcxT2DIQjCLAAMiq7g8YQBeTi7-dfb77MQiD3qVM%2Bmyl7RgK97oTbMjJESXgA2oGy4APoPN%2BrDgQWtKBgAuvGn5KHQoDuG6qxJIIUyaDhFAREIGwzh%2Bn4tCAQgopouARFM0CspoCzJEQgbIah6gxkQtFaIk6wQBsxGfkIwSZPAmgsWRbEYTx2G4fA%2BEbIhYA1sReA0Ng2AACIwHMFySVhOGaHhBFESRpHkUElGoNRnH0X%2BMBMSpamadpqDnIGHE9Fx5qbApAlCVkDkaVpZwubpTDSQZskEQpSk1vGm78Nu-DHjcp5BAYmpgJea7qFMUzcYIRCAQxMBwYR54AHzGaZFFUVMxVMSwiCLKiblmph3nEYgEDBPA4BTGVlXviZW41ZZdW2UxiouS1RD5R1n6xdoNbyboPxJnSDDKGQwTYHSEE3j8950CIL7RlVwZtlWppGKyNAYJMl5nMEMAKVUtQPdMA0zsQdE3WE91wJeACE1l-XdQSxopuifhEMAbUF4SLDQ-D9VVn5dT14BvCwwQ8ZoACOz3wOcADKiQsFU8BTIGADExoooGK0LcRxEADz7Lwu77OV-FgKz5SVNUpaltUABEDyFKLP1aG9dQwDWNblRilly8C5JtMjCzYKz4YC1UIA8yZvPCzTzSg7dAMK7zn6s0oRhSHQ56i-TQSi%2BVOt24bJl83kkFHieaowsGxVO6gFRhAwcQuzAcRRrSovhl7Jm2zQ9v7UITs0KBUBkCYoHZfAUvC0lAdnulfKi2HwjSFHYzIkEq6OPOosK%2B74ae8bpbhioVtGyZJvxHNdLWaciNLL33us77%2B6sMlqpni4we2ZnIC1%2BMKKxzBggJ0nJEp2n14Z6LWc53nBdFyLIBz6lMDlyIx%2Br9HjeMuoLeKx7qe78L3er0PE86xzcUzUeZKWtNEXQWJuSl3qH2CoSAKieDAAAKRJtVIIQA&format=glimdown)

### 😕 Actual Behavior

- The destroy function for the modifier is not called.
- The destroy hook for the component is not called.

### 🤔 Expected Behavior

- The destroy function for the modifier is called.
- The destroy hook for the component is called.

### 🌍 Environment

- Ember: - I've reproduced this going back to Ember 3.28.12
- Ember-CLI: - 3.28.6
- Node.js/npm: - Node 18.20.0, npm 10.5.0
- OS: - macOS 14.5 Sonoma
- Browser: - Chrome 126.0.6478.127 (Official Build) (x86_64)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.