Sorry if the question appears a bit vague

export class FormElementSelectorComponent {
  title = input.required<string>();
  descriptor = signal<string>('');
  isVisible = signal<boolean>(false);

  textVisible = computed(() => {
    return this.descriptor() === '' ? 'empty' : 'filled'
  });

  viewReferece = inject(ElementRef);

  clickButtonAction = output<FormField>({ alias: 'onElementClick' })
  canceledAction = output<boolean>({ alias: 'onCanceled' })

  readonly imgBasePath = "/assets/img";
  readonly optionFieldRows: OptionFieldRow[] = [... omitted for brevity]

  selectFormElement(fieldAltText: string) {
    this.descriptor.update(() => fieldAltText)
  }

  clickFormElement(field: OptionFieldRowItem) {
    console.log(formField)
    this.clickButtonAction.emit(formField);
  }

  clickOutside(event: MouseEvent) {
    const nativeElement = this.viewReferece.nativeElement;
    const clickedInside = nativeElement.contains(event.target);
    if (!clickedInside && this.isVisible()) {
      this.close();
    }
  }

  handleEscapeKey(event: KeyboardEvent) {
    if (this.isVisible() && event.key === 'Escape') {
      this.close();
    }
  }

  open(event?: MouseEvent) {
    event?.preventDefault();
    event?.stopPropagation();
    if (!this.isVisible()) {
      this.isVisible.update(() => true);
    }
  }

  close() {
    this.descriptor.update(() => '');
    this.isVisible.update(() => false);
    this.canceledAction.emit(true);
  }
}

When used inside a component somewhere else, like this…

<app-form-element-selector #formElementSelector [title]="'Select Form Element'"></app-form-element-selector>

It works just fine, really. It behaves as expected. Clicking outside closes the menu, as well as clicking outside of it. However, I wanted to generate it programmatically like this…

 <div class="main-grid">
            <div class="grid-content">
                @for(segment of group(); track segment) {
                <app-group-segment (click)="openEditor($event)" #groupSegment></app-group-segment>
                }
            </div>
        </div>
        <div class="edit-grid">

        </div>
....

export class EditorMainViewComponent {
  @ViewChild('groupSegment', { read: ViewContainerRef }) groupSegments!: ViewContainerRef;

  group = signal<Array<any>>([{}, {}, {}]);

  openEditor(event: any) {

    this.groupSegments.clear();
    const l = this.groupSegments.createComponent(FormElementSelectorComponent);
    l.changeDetectorRef.markForCheck();
    l.setInput('title', 'Select Form Element')

    setInterval(() => {
      l.instance.open();
    }, 10);

  }
}

It opens fine after I added a small interval with the animations as well. However, whenever I click, or even use the escape key, it closes and reopens the component. Even if I click inside the menu it still claims it’s been clicked outside of it. If it helps, I can try to create a stackblitz example later on.