[Bug]: Unable to click focus the editor when adding a menu

[A-Rushton]

What happened?

Unable to click the editor to focus, the class ProseMirror-focused appears then disappears instantly. I can tab the editor into focus but not click.

This only occurs when i add the ngx-editor-menu, and the editor itself works fine without it. Below is the snippet of code used for it. This is a component that gets used in multiple places in the app and the issue occurs everywhere.

<div class="rich-text-editor">
  <h4 *ngIf="title">{{title}}</h4>
  <label>
    <span *ngIf="subTitle" class="subtitle">{{subTitle}}</span>
    <div class="NgxEditor__Wrapper">
      <ngx-editor-menu [editor]="editor"></ngx-editor-menu>
      <ngx-editor [editor]="editor"
                  [(ngModel)]="value"
                  [disabled]="disabled"
                  [placeholder]="placeholder">
      </ngx-editor>
    </div>
  </label>
</div>

Version

18.0.0

Angular Version

17.2.2

What browsers are you seeing the problem on?

Chrome

Link to reproduce

No response

Relevant log output

No response

Willing to submit a PR?

None

[A-Rushton]

Found the issue was with the editor being nested inside of a label... The label must have been focusing the menu rather than the editor - potential pitfall?

[kiwidude68]

@A-Rushton thanks for mentioning the "cause", I just hit the same issue myself today and you nailed the same problem I have. Trying to fix some SonarQube warnings I nested the control - and it breaks.

[A-Rushton]

@kiwidude68 turns out mine was caused by being nested in a label, I removed the label from the component and it still didn’t work. But then turns out the component was also being used inside a label 😂