Focus appears to be broken

[Gaugeforever]

I seem to be unable to focus the text area no matter what method I use and it was previously working. Can someone provide a working example of focusing the text area upon init so the user can simply start typing?

[sranjan-m]

I'm also facing the same problem. Can't type anything in the editor right after page is rendered. The editor allows to type in something only after "swapping to html view and then back to the normal view".

[LogainStark]

Hello i was having the same issue, so i made a workaround on my side to synchronize toolbar part and editor part : Html part :

<form [formGroup]="modelGroup" (ngSubmit)="onSave()" >
  <div>
        <angular-editor  #editor formControlName="value" [config]="editorConfig"></angular-editor>
  </div>
  <button class="btn btn-primary btn-block-rwd" type="submit" >Save</button>
</form>

Ts part

 @ViewChild("editor") editor;

 onSave(): void {
    //saving part on server side 
...
  // then if editor was on html mode, go back to it 
    if (this.editor.modeVisual == false) {
      this.editor.modeVisual = true;
      this.editor.editorToolbar.triggerCommand("toggleEditorMode");
    }
  }

[sranjan-m]

I should have posted this long time ago, but somehow missed it out.

editorConfig: AngularEditorConfig = {
  editable: true
};

Setting the above config solved the problem. Not sure why editable has to be set manually to true. By default it's suppose to be true in the component itself, but anyways hope this helps.

[Gaugeforever]

None of these options work and I have ensured I have the latest version. I did some testing and this prints false.

this.angularEditor.focus(); console.log(this.angularEditor.focused);

I have tried this even on ngAfterViewInit on the component that houses the angular editor. The bottom line is that it is not possible to focus the text area for whatever reason and this needs to be fixed.

[sranjan-m]

<angular-editor id="aEditor" [config]="wysiwygConfig" ></angular-editor>

export class ZoFieldWisywig implements OnInit {
  wysiwygConfig: AngularEditorConfig = {
    editable: true,
    height: '15rem',
    minHeight: '10rem',
    placeholder: 'Enter text here...'
  };
  ngOnInit(): void {
    
  }
}

Have you tried like this? Manage the model bindings according to Template driven Form or Reactive Form.

[Gaugeforever]

Yes I have tried this. The developer seems to have abandoned this project, no responses from them and pull requests aren't being approved so we're just going to pull the entire code base into our project and fix it ourselves. Good luck everyone.

[s-gbz]

I should have posted this long time ago, but somehow missed it out.

editorConfig: AngularEditorConfig = {
  editable: true
};

Setting the above config solved the problem. Not sure why editable has to be set manually to true. By default it's suppose to be true in the component itself, but anyways hope this helps.

Well that's.. funny, but I'm glad it worked so, thank you very much!