Cursor jumps to top when clicking toolbar

I have been implementing Quill in my svelte project. But when I press a button on the toolbar, it places to cursor at the beginning of the editor, making it unable to edit text somewhere in the middle of the editor for example. See gif for example: cursor moving to the start gif

I have tried preventing the event by adding this:

quill.getModule("toolbar").container.addEventListener("mousedown", (e) => {        e.preventDefault();        e.stopPropagation()    });

Or trying to determine with a selection change what happens:

quill.on("selection-change", function (range, oldrange, source) {        var range = quill.getSelection();        if (range) {            if (range.length == 0) {                console.log("old range:" + oldrange)                console.log('User cursor is at index', range.index);            } else {                var text = quill.getText(range.index, range.length);                console.log('User has highlighted: ', text);            }              } else {            console.log('User cursor is not in editor');        }    });

I have noticed oldrange returns null in above code, it seems to forget where the cursor was place before when I click something on the toolbar? Also the button I press on the toolbar turns black again, even though I have clicked the bold button which should stay blue.

Quill configuration:

let container = editorPlaceholder;    quill = new Quill(container, {        modules: {            toolbar: [                [{ header: [1, 2, 3, false] }],                ["bold", "italic", "underline", "strike"],                ["link", "code-block"],            ],        },        theme: "snow",         scrollingContainer: "html",    });

editorplaceholder is binded to the div in the DOM. This happens before a onMount() in which Quill is initialized.

Quill version: 1.3.6