Dialog cards autoscroll when embedded

Submitted by kevinpham on Tue, 07/13/2021 - 04:12

Forums:

Hello,

I have an issue where adding this to a course index page as an embedded element (iframe) causes it to automatically scroll to the content on page load, regardless of where it is on the page. This issue could not be replicated locally consistently, but is caused in this block.
Snippet as per below:
<pre class="brush:lang">
key: "setCardFocus",
value: function(e) {
if (!0 === e)
this.$cardTextArea.focus();
else {
var r = this.getDOM();
console.log(this)
r.one("transitionend", (function() {
r.focus() // <-- this causes the autoscroll behaviour
}
))
}
}
</pre>

What I'm not sure about is why this focus is required at all? The only time I believe this should be done is when the user clicks on a card, and the dialog card should scroll to the start of the top of the displayed card again (e.g. if it was too vertically high). What it currently does is trigger this code when loaded from an iframe (from what I've noticed), and the main window automatically scrolls to this content.

This is very similar to this linked issue https://h5p.org/node/1150636.

Platform: Moodle
Tested On Desktop
Happens in Firefox, Chrome, Chromium

H5P plugin version
1.21.0
H5P content type & version "version": "1.7.3"

"name": "h5p-dialogcards"
No console errors
No PHP errors
No env changes
No browser extensions/changes

Content types:

Dialog cards

You are here

Dialog cards autoscroll when embedded