Hello,
we use ONLYOFFICE Docs™ Community Edition Vers. 6.3.1 and integrated
the editor to an HTML popup/modal, not full-screen. When the editor
finished initialization, it automatically gets the zoom and the browser is scrolling
down.
We don’t want this behavior, the editor should not get the focus and
scrolling should also not happen.
I already read about setting this value, but it didn’t help:
“customization”: {
“integrationMode”: “embed”
}
Thanks for your help!
Hello @ipdoc1
Please note that this setting was added in version 7.2:
https://api.onlyoffice.com/editors/changelog#72
That said, I’d recommend you to update to the actual version and check the situation again.
Hi @Constantine
Finally, we updated to 8.1. But the problem with the auto focus / scroll still occurs. Any idea what we do wrong?
self.docEditor = new DocsAPI.DocEditor(self.$el.attr('id'), {
"document": {
"fileType": "docx",
"title": self.model.get('name'),
"url": self.documentUrl,
"key": self.getValue()
},
"type": "desktop",
"width": "100%",
"editorConfig": {
"callbackUrl": self.saveUrl,
"user": {
"id": 'admin'
"name": 'admin'
},
"region": 'de-DE',
"customization": {
"compactHeader": true,
"help": false,
"toolbarHideFileName": true,
"toolbarNoTabs": true,
"plugins": false,
"reviewDisplay": 'markup',
"integrationMode": "embed"
},
"isReadOnly": false
},
"events": {
"onAppReady": function () {
},
"onDocumentReady": function () {
},
"onDocumentStateChange": function (e) {
}
},
});
Thanks!
Can you provide a video demonstration of this behavior? I do believe it is related to the focus on the editor once the page is loaded but I want to make sure that I understand it correctly.
As I can see you have several events declared, what functions do they execute? Have you tried loading the editor without these events to see if there is any difference? I wasn’t able to reproduce the issue with simple HTML though.
Here is a clip of the behavior:
Before recording, I removed the empty event handlers but it didn’t have any effect.
After the editor loaded, the window jumps automatically down and the editor gets the focus. Typing is already bound to the editor.
Thank you for the video. That is weird behavior, indeed. Do you call new window inside the page or this is completely separate window?
What do you mean by window? It’s only one HTML page, no iframes etc. The popup you see is just a standard bootstrap modal.
I think I was able to reproduce the issue by building simple HTML with modal window according to this documentation:
Can you confirm that you’ve implemented it in the same way?
Yes, we also use BS modals. But what exactly causes the focus after the editor has finished loading? The modal itself is already rendered!?
It could be the case. Can you share sample of your implementation of modal with editor? In my test modal is shown right after page is loaded and when editor loads too, the focus goes to the editor:
$('#modal-content').modal({
show: false
});
However, I am not familiar with your implementation of modal with editor, i.e. in which case or under which conditions editor should be rendered. Possibly solution would be to call modal without editor at first so that focus stays in required field and then append editor by pressing specific button, e.g. Preview in your video.
Hello, have you managed to fix this @ipdoc1? We’re embedding an editor using the @onlyoffice/document-editor-react package, again providing the integrationMode: "embed" value and it seems to have no effect. The editor keeps scrolling / stealing my focus. Running version 8.2.2.
No, still the same issue. Do you also use bootstrap modals?
Nope, we don’t even use modals – we render the editors directly on the page.
Hello @fr3fou
Are you using integrationMode parameter when initializing the editor on your page?
Sorry @ipdoc1 for the amount of time it takes to check the scenario with Bootstrap modal.
Yes, I am using integrationMode: "embed"
No problem. I also didn’t post our implementation because the modal creation, embedding of the editor etc. is done in many multiple files - too hard to understand if you don’t have the entire code.
But like @fr3fou mentioned, the problem also occurs without using modals. Maybe that gives you some new insights - the problem on our side is still annoying.
@fr3fou, considering that you are not using modals, I would ask you to start a new topic. Main discussion here is related to the modals, so it is better not to mix up topics. Thank you.
Hello @Constantine, the bug occurs in our modals as well. We use https://ant.design/components/modal instead of Bootstrap
The focus is triggered here:
onEditComplete: function(t) {
var e = this.getApplication(),
i = e.getController("Toolbar").getView(),
n = e.getController("RightMenu").getView("RightMenu");
if (!this.appOptions.isEdit || !i || !i.btnInsertShape.pressed && !i.btnInsertText.pressed || _.isObject(arguments[1]) && "tlbtn-insertshape" === arguments[1].id || (this.api && this.api.StartAddShape("", !1),
i.btnInsertShape.toggle(!1, !1),
i.btnInsertText.toggle(!1, !1)),
this.appOptions.isEdit && i && i.btnHighlightColor.pressed && (!_.isObject(arguments[1]) || "id-toolbar-btn-highlight" !== arguments[1].id) && (this.api.SetMarkerFormat(!1),
i.btnHighlightColor.toggle(!1, !1)),
this.appOptions.isEdit && (i && i._isEyedropperStart || n && n._isEyedropperStart) && (i._isEyedropperStart ? i._isEyedropperStart = !1 : n._isEyedropperStart = !1,
this.api.asc_cancelEyedropper()),
**e.getController("DocumentHolder").getView().focus(),**
this.api && this.appOptions.isEdit && !i._state.previewmode) {
var o = this.api.asc_isDocumentCanSave(),
s = this.appOptions.forcesave || this.appOptions.canSaveDocumentToBinary || !this.appOptions.canSaveToFile,
a = !!i.btnCollabChanges.rendered && i.btnCollabChanges.cmpEl.hasClass("notify"),
r = !o && !a && !s || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount > 1 && !s || !this.appOptions.showSaveButton;
i.btnSave.setDisabled(r)
}
Common.UI.HintManager.clearHints(!0)
}