Combobox closing issue

[mknight9090]

Description

After update from Plate 40.2.2 to the latest version, I have problems with comboboxes (slash command or mention). It's possible to reproduce the problem in the official Plate playground.

The combobox does not close when clicking another paragraph - it moves with the selection. The Esc key makes it jump to point [0, 0].

Recording.2025-01-24.101359.mp4

Reproduction URL

https://platejs.org/

Reproduction steps

1. Open '/' command in new paragraph
2. Click on another paragraph (or press Esc)

Plate version

latest

Slate React version

latest

Screenshots

Logs

Browsers

No response

[dima-mamaev]

Upgraded to v43, faced same issue. Pretty annoying.

[TheHogginator]

Upgraded to v43, faced same issue. Pretty annoying.

Yeah super annoying, I just ran into this as well. I had copied the InlineCombobox element code from https://platejs.org/docs/components/inline-combobox it's doing something funky with setting a ref into state meaning it's not the correct value when the onCancelInput function tries to read it. Here's what I changed to get it working. God speed brother.

diff --git a/components/plate-ui/inline-combobox.tsx b/components/plate-ui/inline-combobox.tsx
index 52c1ab1..b6c721d 100644
--- a/components/plate-ui/inline-combobox.tsx
+++ b/components/plate-ui/inline-combobox.tsx
@@ -11,10 +11,11 @@ import React, {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 
-import type { PointRef, TElement } from '@udecode/plate';
+import type { Point, PointRef, TElement } from '@udecode/plate';
 
 import {
   type ComboboxItemProps,
@@ -115,7 +116,7 @@ const InlineCombobox = ({
    * Track the point just before the input element so we know where to
    * insertText if the combobox closes due to a selection change.
    */
-  const [insertPoint, setInsertPoint] = useState<PointRef | null>(null);
+  const insertPoint = useRef<Point | null>(null);
 
   useEffect(() => {
     const path = editor.api.findPath(element);
@@ -127,7 +128,7 @@ const InlineCombobox = ({
     if (!point) return;
 
     const pointRef = editor.api.pointRef(point);
-    setInsertPoint(pointRef);
+    insertPoint.current = pointRef.current;
 
     return () => {
       pointRef.unref();