Preventing focus when text gets added to document

[Pascal]

Hey all,

I have added a video of my application, which has an unintended event happening.
As soon as I type in the field on the left, this code will be executed:

  updateField(): void {
    this.questionService.updateQuestion(this.field);
    setTimeout(() => {
      document.getElementById(`input-${this.field.id}`)?.focus();
    });
  }

As you can see, what I'm trying to prevent is the editor from catching the focus of the browser by immediately refocusing on the input element. Sadly, just for the most brief moment, it still loses focus. I just want to be able to type in a field on the left to insert text on the right. The reason should be clear, shifting the focus isn't what I want, this causes a lot of accessibility issues and some other coding issues.

I tried catching and preventing the event with this code, but it doesn't seem to be able to stop the behavior (It's also the code that shows the logs in the video):

  @HostListener('document:focusin', ['$event'])
  onFocus(event: FocusEvent) {
    const target = event.target as HTMLElement;
    if (target && target.classList.contains('e-de-text-target')) {
      event.preventDefault();
      event.stopPropagation();
    }
    console.log(`Element focused: `, event.target);
  }

The code that updates the text in the document editor is your basic code:

updateQuestion(id: string)

...

const preview = this.swiftPreview?.documentEditor;

...

preview?.selection.selectBookmark(id);

...

preview?.editor.insertText(value);

...

I really need to fix this, since this causes to many issues.
If there is another way to better replace text in any way that prevents this it would be awesome to.

Thanks

Attachment: Swift__Google_Chrome_20230321_172143_3a4de10f.zip

[Selvaprakash Karuppusamy]

Hi Pascal,

Currently, we do not have an API to disable auto focus. We have already logged this as a feature request and will include it in our upcoming release.

You can also track the status of the feature using the link below.

https://www.syncfusion.com/feedback/22798/allow-disabling-of-auto-focus  

Regards,

Selvaprakash K

[Selvaprakash Karuppusamy]

Hi Pascal,

We are glad to announce that our patch release (v21.1.37) is rolled out successfully and In this release, we have included the Feature “Allow disabling of Auto Focus”.

Please upgrade to the latest version packages to use this feature.

NPM Link: (Client-side)

https://www.npmjs.com/package/@syncfusion/ej2-documenteditor

https://www.npmjs.com/package/@syncfusion/ej2-angular-documenteditor

NuGet link: (Server-side)

https://www.nuget.org/packages/Syncfusion.Ej2.Wordeditor.ASPNet.Core/

https://www.nuget.org/packages/Syncfusion.Ej2.Wordeditor.ASPNet.MVC5/

Document Editor gets focused automatically when the page loads. If you want the Document editor not to be focused automatically it can be customized.

The following example illustrates to disable the auto focus in DocumentEditorContainer.

let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', enableAutoFocus: false});

 

 

The following example illustrates to disable the auto focus in DocumentEditor.

let editor: DocumentEditor = new DocumentEditor({ height: '590px', enableAutoFocus: false});

 

Note: Default value of enableAutoFocus  property is true.

 

Feedback Link: https://www.syncfusion.com/feedback/22798/allow-disabling-of-auto-focus

Please let us know if you need any further assistance.