Clear properly symbol refs when removed from the non symbol parent

src/dom_components/model/Component.ts

@@ -331,7 +331,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
 
   __postRemove() {
     const { em } = this;
-    const um = em?.get('UndoManager');
+    const um = em?.UndoManager;
     if (um) {
       um.remove(this.components());
       um.remove(this.getSelectors());

src/dom_components/model/Components.ts

@@ -16,7 +16,7 @@ import {
 import ComponentText from './ComponentText';
 import ComponentWrapper from './ComponentWrapper';
 import { ComponentsEvents } from '../types';
-import { isSymbolInstance, isSymbolRoot } from './SymbolUtils';
+import { isSymbolInstance, isSymbolRoot, updateSymbolComps } from './SymbolUtils';
 
 export const getComponentIds = (cmp?: Component | Component[] | Components, res: string[] = []) => {
   if (!cmp) return [];
@@ -205,7 +205,10 @@ Component> {
       }
 
       const inner = removed.components();
-      inner.forEach(it => this.removeChildren(it, coll, opts));
+      inner.forEach(it => {
+        updateSymbolComps(it, it, inner, { ...opts, skipRefsUp: true });
+        this.removeChildren(it, coll, opts);
+      });
     }
 
     // Remove stuff registered in DomComponents.handleChanges

src/dom_components/model/SymbolUtils.ts

@@ -236,7 +236,7 @@ export const updateSymbolComps = (symbol: Component, m: Component, c: Components
       );
 
     // Propagate remove only if the component is an inner symbol
-    if (!isSymbolRoot(m)) {
+    if (!isSymbolRoot(m) && !o.skipRefsUp) {
       const changed = 'components:remove';
       const { index } = o;
       const parent = m.parent();

test/specs/dom_components/model/Symbols.ts

@@ -413,6 +413,39 @@ describe('Symbols', () => {
     });
   });
 
+  test('Removing a component containing an instance, will remove the reference in the main', () => {
+    const container = wrapper.append('<custom-el></custom-el>')[0];
+    const comp = container.append(simpleComp)[0];
+    const symbol = createSymbol(comp);
+
+    const commonInfo = {
+      isSymbol: true,
+      main: symbol,
+      instances: [comp],
+    };
+
+    expect(getSymbolInfo(symbol)).toEqual({
+      ...commonInfo,
+      isMain: true,
+      isInstance: false,
+      relatives: [comp],
+    });
+    expect(comp.parent()).toEqual(container);
+
+    container.remove();
+
+    expect(getSymbolInfo(symbol)).toEqual({
+      ...commonInfo,
+      isMain: true,
+      isInstance: false,
+      relatives: [],
+      instances: [],
+    });
+
+    // the main doesn't lose its children
+    expect(symbol.getInnerHTML()).toBe('Component');
+  });
+
   test('New component added to an instance is correctly propogated to all others', () => {
     const comp = wrapper.append(compMultipleNodes)[0];
     const compLen = comp.components().length;