CODEWITHSUNDEEP
javascripthtmlreactjs
Lorenz
Lorenz

Reputation: 775

How to keep document cursor visible even when losing focus

I am trying to have a contentEditable div continue to show a non-blinking cursor even when it is not focused. The exact behavior I am trying to emulate is how Google docs continues to show the document cursor even when you click on another part of the screen. I am using React.

Upvotes: 0

Views: 407

Answers (1)

Ryan Zeelie
Ryan Zeelie

Reputation: 1510

Create refs for all the elements that you need and then set them to focus onBlur if they're still selected. If you look at the sandbox. I'm dynamically creating the editable divs and their refs. As for the non blinking cursor, you could create a custom one using css.

const handleBlur = () => {
  // Keep focus on selected element when blured
  elementsRef.current[selected].current.focus();
  };

useEffect(() => {
  // Set the current focused element
  elementsRef.current[selected].current.focus();
  }, [selected]);

 <div
      contentEditable
      onBlur={handleBlur}
      ref={elementsRef.current[index]}
      key={index}
      onClick={(e) => {
      setSelected(e.currentTarget.id);
       }}
      style={styles.input}
   ></div>

CodeSandbox : https://codesandbox.io/s/busy-jasper-drlccv?file=/src/App.js

Upvotes: 1

Related Questions