programatically set focus

[fridaystreet]

Hi

Apologies, I realise this is probably an overly asked question. I have search and still can't really find how to do this. Any assistance would be greatly appreciated.

I have an emoji picker, opens with click of an emjoi icon. Obviously when that's clicked the focus is lost from the input. When the emoji is selected i'm using editor.insertNode({ text: selectedEmjoiString });

This all works fine and the emkoi is placed in the editor. But I can't find anyway to easily just set the focus back to the editor.

Did read somewhere on someone attempting to build an emjoi picker with a plate combobox. There was a comment about making sure the combobox was controlled so it wouldn't lose focus. I don't really want to use the combobox as the layout and UI of the picker is much nicer. But is there something in the controlled combo box I can lift out and use to ensure the focus is kept?

Slate doco points towards editor.focus(), but this method doesn't seem to appear anywhere in plate editor.

I'm using plate 7.0.3

Again any assistance would be greatly appreciated.

Cheers
Paul

[fridaystreet]

managed to get something working, but this feels like a total hack. Would be great if someone can point me in a better direction.
basically using state to set the autoFocus property of editableProps. When I want to refocus on the editor, reset the property to false, then settimeout to set it back to true. Then select all and collapse to the end through a transform. I store the current value in the contentRef and pass that to editor via the initialValue so that it rerenders from changing the autofocus prop with previous value before doing the transform.

in very basic form:

 const contentRef = useRef();

  const focusEditor = useCallback(() => {
    setAutoFocus(false);
    setTimeout(() => {
      setAutoFocus(true);
      setTimeout(() => {
        Transforms.select(editor, {
          anchor: Editor.start(editor, []),
          focus: Editor.end(editor, [])
        });
        Transforms.collapse(editor, { edge: 'end' });
      }, 0);
    }, 0);
  }, [setAutoFocus, editor]);

const onChange = useCallback(value => {
  contentRef.current = value;
}, [contentRef]);

return (
    <Plate onChange={onChange} initialValue={contentRef.current} oneditableProps={{ autoFocus }} > 
       <MyComponentThatWantsToReFocus focusEditor={focusEditor} />
    </Plate>
)

[guatedude2]

I recommend using ReactEditor.focus(editor);

Source: https://stackoverflow.com/questions/61223954/in-slatejs-how-to-change-focus-to-specific-editor-when-multiple-editors-are-pre

[kungfoolabs]

Hi there. Thanks for this referral. @guatedude2 could you give me an example of how to do this with Platejs? I can't seem to get a hold of a ReactEditor ref, and I want to bring focus to the editor when I click a button

[GrinZero]

I encountered the exact same problem, which also occurred when inserting emoticons

[Liboul]

I have found this to be the easiest:

To focus at the end of the editor:

import { selectEditor } from "@udecode/plate-utils"

selectEditor(editor, {edge: "end", focus: true,})

To focus at the current selection, falling back to the end if there's no selection:

import { selectEditor } from "@udecode/plate-utils"

selectEditor(editor, {
  at: editor.selection || undefined,
  edge: editor.selection ? undefined : "end",
  focus: true,
})

There's also the undocumented focusEditor method:

/**
 * Focus the editor. Extension:
 *
 * If `target` is defined:
 * - deselect the editor (otherwise it will focus the start of the editor)
 * - select the editor
 * - focus the editor
 */
declare const focusEditor: <V extends Value>(editor: TReactEditor<V>, target?: Location) => void;

selectEditor doc

[kumarajay0412]

i am using transform from slate to achieve this functionality

used Transforms.select(editor, []) and it work fine for me

https://docs.slatejs.org/concepts/03-locations