iOS Safari keyboard ▲/▼ navigation ignores Tiptap editors

[jeffcompton]

Affected Packages

react, starter-kit

Version(s)

3.20.0

Bug Description

On mobile Safari, the up/down navigation arrows above the keyboard always show in a disabled state when there are multiple Tiptap fields onscreen.

Browser Used

Safari

Code Example URL

No response

Expected Behavior

I expected the up/down arrows to render the same way as "input" fields or "textarea" fields, where the up arrow is enabled if there are Tiptap fields above the currently selected input area, and the down arrow is enabled if there are Tiptap fields below the currently selected input area.

Additional Context (Optional)

Observed on iOS 26.3, iPhone 14 Pro. I included the bare-bones implementation used in the screenshot. codesandbox.io didn't work for demo purposes on mobile safari, and showed an error page after several redirects.

import { useEffect, useState } from "react";
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";

function BareTiptapField() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: "",
    immediatelyRender: false,
    editorProps: {
      attributes: {
        class: "outline-none min-h-[2em]",
      },
    },
  });

  if (!editor) return null;

  return (
    <div className="border border-gray-300 rounded p-2">
      <EditorContent editor={editor} />
    </div>
  );
}

export default function TiptapFieldsPage() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  return (
    <div className="max-w-xl mx-auto p-6 flex flex-col gap-4">
      <h1 className="text-lg font-medium">TipTap fields</h1>
      {mounted && (
        <>
          <BareTiptapField />
          <BareTiptapField />
          <BareTiptapField />
        </>
      )}
    </div>
  );
}

Dependency Updates

• Yes, I've updated all my dependencies.