[SOLVED] Unwanted window scrolling during "block type" dropdown activation #612

mgalgs · 2024-10-23T17:48:32Z

mgalgs
Oct 23, 2024

Yes, I'm posting a discussion for an already solved issue 😅 During the process of putting together this post I was able to solve the problem, but I'm still posting it in hopes of helping anyone else who might face a similar issue.

First, the solution:

commit af273d3ebdcaaf65567cef9f890beeee6dfe56d1
Author: Mitchel Humpherys <mitch@directangular.com>
Date:   Mon Oct 21 15:19:39 2024 -0700

    base: Don't apply styles to <body>
    
    Certain UI frameworks (like Radix UI, which is used by MDXEditor) break
    when there are classes or styles applied directly to the <body> element. We
    currently have 75px of top padding on our <body> to accommodate our
    nav. Fix the Radix UI issues by moving that style to `.body` and wrapping
    our whole body inside a <div class="body">.
    
    This diff is best viewed with --ignore-space-change.

diff --git a/static/css/main.css b/static/css/main.css
index ff6a36ec6b..5d13d68212 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -102,7 +102,7 @@ html {
     font-size: inherit !important;
 }
 
-body {
+.body {
     padding-top: 75px;
 }
 
diff --git a/templates/base.html b/templates/base.html
index ae7a708a26..f055f35d00 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -92,6 +92,7 @@
       }
     </style>
 
+    <div class="body">
       {% block nav %}
         <div class="container-fluid">
           <div class="row">
@@ -519,6 +520,7 @@
       {% block footer %}
         {% include "footer.html" %}
       {% endblock %}
+    </div>
 
     {% str_build_id %}

And, without further ado, the original question...

I'm experiencing an issue where activating the "block type" dropdown causes the page to scroll, and then when I actually select a block type option it scrolls back to where it started. See the screen recording below. This behavior is not present in the MDXEditor "Live demo".

From what I can tell, the block type select is from Radix UI. One thing I noticed that's different in the "Live demo" vs. my example is that the root <body> node in my app gets an attribute assigned ([data-scroll-locked="1"]) while the "block type" dropdown is activated:

This isn't the case in the MDX Live demo. I've done some searching for data-scroll-locked and Radix UI and have come across a few issues where people are reporting weird scrolling behavior, but none of the solutions have worked for me.

I'm not filing this as an issue because:

This behavior is not present in the MDXEditor "Live demo".
My app has a bunch of other 3rd party dependencies that might not be behaving nicely with MDX.
My webpack config is practically an ancient historical artifact which has been tweaked into oblivion over the years.

Due to the above, I have fairly high confidence that if I created a new app and tried to reproduce this issue I wouldn't be able to... So before I go that route or start playing 3rd-party dependency whack-a-mole I wanted to see if anyone had ideas on things to investigate in a more bottom-up troubleshooting approach.

I've reproduced the issue on an old version of MDXEditor (1.8.1) as well as the latest release (3.14.0).

Screen recording

markdown-editor-scroll-2024-10-21_14.01.53.mp4

import React, { useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';

import {
    MDXEditor,
    headingsPlugin,
    listsPlugin,
    linkPlugin,
    linkDialogPlugin,
    imagePlugin,
    toolbarPlugin,
    UndoRedo,
    BoldItalicUnderlineToggles,
    BlockTypeSelect,
    ListsToggle,
    CreateLink,
    InsertImage,
} from '@mdxeditor/editor';

import 'style-loader!css-loader!@mdxeditor/editor/style.css';

const MarkdownEditor = (props) => {
    const { onChange, onSave, onCancel } = props;
    const [markdown, setMarkdown] = useState(props.markdown);
    const editorRef = useRef(null);

    const onEditorChange = (md) => {
        setMarkdown(md);
        if (onChange)
            onChange(md);
    };

    const setEditorRef = (node) => {
        editorRef.current = node;
    };

    const onSaveClick = (e) => {
        e.preventDefault();
        onSave(markdown);
    };

    const onCancelClick = (e) => {
        e.preventDefault();
        onCancel();
    };

    const toolbarContents = () => (
        <React.Fragment>
          <UndoRedo />
          <BoldItalicUnderlineToggles />
          <BlockTypeSelect />
          <ListsToggle />
          <CreateLink />
          <InsertImage />
        </React.Fragment>
    );

    return (
        <div className="str-markdown-editor">
          <MDXEditor
              ref={setEditorRef}
              markdown={props.markdown}
              plugins={[
                  toolbarPlugin({ toolbarContents }),
                  headingsPlugin(),
                  listsPlugin(),
                  linkPlugin(),
                  linkDialogPlugin(),
              ]}
              onChange={onEditorChange}
              contentEditableClassName="markdown-editor-content"
          />
          {props.onSave &&
           <div className="btn-group markdown-editor-actions">
             <button className="btn btn-primary"
                     onClick={onSaveClick}>
               Save <i className="fa fa-floppy-o"></i>
             </button>
             <button className="btn btn-default"
                     onClick={onCancelClick}>
               Cancel
             </button>
           </div>
          }
        </div>
    );
};

MarkdownEditor.propTypes = {
    markdown: PropTypes.string.isRequired,
    onChange: PropTypes.func,
    onSave: PropTypes.func,
    onCancel: PropTypes.func,
};

export default MarkdownEditor;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SOLVED] Unwanted window scrolling during "block type" dropdown activation #612

{{title}}

Replies: 0 comments

Select a reply

[SOLVED] Unwanted window scrolling during "block type" dropdown activation #612

mgalgs Oct 23, 2024

Screen recording

Replies: 0 comments

mgalgs
Oct 23, 2024