Slash command menu closes immediately after typing / in new block when using Yjs-based collaboration

[miloszglodkowski]

When using collaboration with Yjs providers (e.g., HocuspocusProvider, YPartyKitProvider), typing / as the first character in a new block opens the slash command menu briefly, but it immediately disappears.

This happens consistently with any provider, even with no backend/server connection, so it's clearly triggered by local Yjs state updates.

Steps to Reproduce

1. Use BlockNote with useCreateBlockNote() and enable collaboration via any Yjs provider.
2. Focus on an new empty block.
3. Type /.
4. The slash menu appears for a split second and then closes automatically.

Expected Behavior
The slash menu should remain open after typing /, allowing the user to choose a command.

Root Cause (Suspected)

• Typing / inserts a character into the shared Yjs document.
• Yjs emits a doc.update event.
• BlockNote likely re-renders or resets internal state (e.g., selection or block state).
• This causes the menu to close unintentionally.

This behavior occurs even offline, confirming it's not due to syncing or server round-trips

[nperez0111]

Hi @miloszglodkowski can you give me a bit more information here on what you are seeing, since I can't seem to reproduce on our demo https://www.blocknotejs.org/ which should have the same sort of set up.

A screen recording would be ideal to see if it breaks in a specific situation

[nperez0111]

Also, please update to the latest version of blocknote as I made a number of fixes in the past week

[miloszglodkowski]

Hi @nperez0111 thanks for your prompt answer. Here is requested video: https://www.loom.com/share/c93cbfc6f0ef491bb31dcad9f2e6ac5a?sid=f0752410-2b3c-4df5-a85e-8bd4a22dcad2

Here is a code to replicate the exact setup from video:

 import React, { useEffect, useState } from "react";
import * as Y from "yjs";
import YPartyKitProvider from "y-partykit/provider";
import {useCreateBlockNote } from "@blocknote/react";
import "@blocknote/shadcn/style.css";
import { BlockNoteView } from "@blocknote/shadcn";

import "@blocknote/core/style.css";

export default function TestBlockNotePartykit() {
  const ydoc = new Y.Doc();
  const [isReady, setIsReady] = useState(false);

  const provider = new YPartyKitProvider(
    "blocknote-dev.yousefed.partykit.dev",
    "test-room-123",
    ydoc
  );

  const editor = useCreateBlockNote({
    collaboration: {
      provider,
      fragment: ydoc.getXmlFragment("document"),
      user: {
        name: "Test User",
        color: "#22c55e",
      },
    },
  });

  useEffect(() => {
    provider.on("sync", () => setIsReady(true));
  }, []);

  if (!isReady) return <div>Connecting to Partykit…</div>;

  return (
    <div style={{ padding: "1rem", border: "1px solid #ccc" }}>
      <h2>Test BlockNote + Partykit</h2>
      <BlockNoteView editor={editor} theme="light" />
    </div>
  );
}

Thanks!

[nperez0111]

I'm not able to reproduce on this example @miloszglodkowski https://www.blocknotejs.org/examples/collaboration/partykit

Could you maybe be on an older version of blocknote? What version are you on right now? The latest, atm, is 0.29.1

[miloszglodkowski]

Hi @nperez0111 I was pretty sure I was already on the latest version, but it turned out I was still on 0.28.0. My apologies for the oversight!

Just updated to 0.29.1, and I can confirm the issue is now resolved, the slash menu stays open as expected. Thank you for the quick support and fixes! 🙌