Skip to content

Page jumps to top when inserting a column or row via "+" button #3214

@liangdrime

Description

@liangdrime

While inserting a column or row by clicking the table’s "+" button, the page jumps to the top if the content is long and the table is near the bottom.

Image

Steps to reproduce the behavior:

  1. Insert a table at the bottom of a long document on a Mac.
  2. Click inside the table, then hit the "+" button to add a column or row.
  3. Check what happens next.

Expected behavior
The page should stay in the same position, without jumping around.

Device Information

  • OS: macOS

Additional context

On Mac (WebKit), clicking a button element causes the web view to blur the current editable area, which means the editor loses focus.

When the "+" button is clicked, it calls formatTableContentModel, which then triggers editor.focus(). However, in focus.ts, the cached selection.selection is null, so it falls back to core.logicalRoot.focus()—and that causes the editor to jump to the top of the page.

export const focus: Focus = core => {
    if (!core.lifecycle.shadowEditFragment) {
        const { api, domHelper, selection } = core;

        if (!domHelper.hasFocus() && selection.selection?.type == 'range') {
            api.setDOMSelection(core, selection.selection, true /*skipSelectionChangedEvent*/);
        }

        // fallback, in case editor still have no focus
        if (!domHelper.hasFocus()) {
            core.logicalRoot.focus();
        }
    }
};

To fix this:

  • One way is to add preventScroll to core.logicalRoot.focus().
  • Another option is to improve the selection cache logic in SelectionPlugin so it works for all WebKit browsers, not just Safari.
    // Safari has problem to handle onBlur event. When blur, we cannot get the original selection from editor.
    // So we always save a selection whenever editor has focus. Then after blur, we can still use this cached selection.
    if (newSelection?.type == 'range') {
         if (this.isSafari) { // 👉 update it to include both iOS and macOS, since they're all using Apple WebKit.
              this.state.selection = newSelection;
         }
    }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions