fix: input in create link button popover closing keyboard

examples/01-basic/04-default-blocks/src/App.tsx

@@ -2,6 +2,8 @@ import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
 import { useCreateBlockNote } from "@blocknote/react";
+import { Button, Popover, Text, TextInput } from "@mantine/core";
+import { useRef } from "react";
 
 export default function App() {
   // Creates a new editor instance.
@@ -148,6 +150,8 @@ export default function App() {
     ],
   });
 
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
   // Renders the editor instance using a React component.
   return <BlockNoteView editor={editor} />;
 }

packages/ariakit/src/input/TextInput.tsx

@@ -23,6 +23,7 @@ export const TextInput = forwardRef<
     disabled,
     onKeyDown,
     onChange,
+    onClickCapture,
     onSubmit,
     autoComplete,
     "aria-activedescendant": ariaActivedescendant,
@@ -51,6 +52,7 @@ export const TextInput = forwardRef<
           disabled={disabled}
           onKeyDown={onKeyDown}
           onChange={onChange}
+          onClickCapture={onClickCapture}
           onSubmit={onSubmit}
           autoComplete={autoComplete}
           aria-activedescendant={ariaActivedescendant}

packages/mantine/src/form/TextInput.tsx

@@ -20,6 +20,7 @@ export const TextInput = forwardRef<
     disabled,
     onKeyDown,
     onChange,
+    onClickCapture,
     onSubmit,
     autoComplete,
     "aria-activedescendant": ariaActivedescendant,
@@ -48,6 +49,7 @@ export const TextInput = forwardRef<
       disabled={disabled}
       onKeyDown={onKeyDown}
       onChange={onChange}
+      onClickCapture={onClickCapture}
       onSubmit={onSubmit}
       autoComplete={autoComplete}
       aria-activedescendant={ariaActivedescendant}

packages/react/src/components/LinkToolbar/EditLinkMenuItems.tsx

@@ -6,12 +6,14 @@ import {
 import {
   ChangeEvent,
   KeyboardEvent,
+  MouseEvent,
   useCallback,
   useEffect,
   useState,
 } from "react";
 import { RiLink, RiText } from "react-icons/ri";
 import { useComponentsContext } from "../../editor/ComponentsContext.js";
+import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 import { useExtension } from "../../hooks/useExtension.js";
 import { useDictionary } from "../../i18n/dictionary.js";
 import { LinkToolbarProps } from "./LinkToolbarProps.js";
@@ -36,6 +38,7 @@ export const EditLinkMenuItems = (
 ) => {
   const Components = useComponentsContext()!;
   const dict = useDictionary();
+  const editor = useBlockNoteEditor();
 
   // eslint-disable-next-line @typescript-eslint/unbound-method -- editLink is a plain object method, not a class method
   const { editLink } = useExtension(LinkToolbarExtension);
@@ -80,18 +83,32 @@ export const EditLinkMenuItems = (
     props.setToolbarPositionFrozen?.(false);
   }, [editLink, currentUrl, currentText, props]);
 
+  // Scrolling the input into view works around an Android Chrome issue where
+  // the input is otherwise left hidden behind the on-screen keyboard. We then
+  // restore the scroll position to the editor selection.
+  const handleClickCapture = useCallback(
+    (event: MouseEvent<HTMLInputElement>) => {
+      event.currentTarget.scrollIntoView();
+      setTimeout(() => {
+        editor.transact((tr) => tr.scrollIntoView());
+      }, 1000);
+    },
+    [editor],
+  );
+
   return (
     <Components.Generic.Form.Root>
       {/* // TODO: add labels? */}
       <Components.Generic.Form.TextInput
         className={"bn-text-input"}
         name="url"
         icon={<RiLink />}
-        autoFocus={true}
+        autoFocus={false}
         placeholder={dict.link_toolbar.form.url_placeholder}
         value={currentUrl}
         onKeyDown={handleEnter}
         onChange={handleUrlChange}
+        onClickCapture={handleClickCapture}
         onSubmit={handleSubmit}
       />
       {showTextField !== false && (
@@ -103,6 +120,7 @@ export const EditLinkMenuItems = (
           value={currentText}
           onKeyDown={handleEnter}
           onChange={handleTextChange}
+          onClickCapture={handleClickCapture}
           onSubmit={handleSubmit}
         />
       )}

packages/react/src/editor/ComponentsContext.tsx

@@ -317,6 +317,7 @@ export type ComponentProps = {
         value: string;
         onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
         onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+        onClickCapture?: (event: MouseEvent<HTMLInputElement>) => void;
         onSubmit?: () => void;
         autoComplete?: HTMLInputAutoCompleteAttribute;
         "aria-activedescendant"?: string;

packages/shadcn/src/form/TextInput.tsx

@@ -21,6 +21,7 @@ export const TextInput = forwardRef<
     disabled,
     onKeyDown,
     onChange,
+    onClickCapture,
     onSubmit,
     autoComplete: _autoComplete,
     "aria-activedescendant": ariaActivedescendant,
@@ -57,6 +58,7 @@ export const TextInput = forwardRef<
           value={value}
           onKeyDown={onKeyDown}
           onChange={onChange}
+          onClickCapture={onClickCapture}
           onSubmit={onSubmit}
           ref={ref}
           aria-activedescendant={ariaActivedescendant}