We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Preventing focus when text gets added to document

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


2 Replies

SK Selvaprakash Karuppusamy Syncfusion Team March 24, 2023 02:42 PM UTC

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



SK Selvaprakash Karuppusamy Syncfusion Team March 29, 2023 06:25 PM UTC

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.


Loader.
Live Chat Icon For mobile
Up arrow icon