Bug: Caret not positioning correctly when not clicking directly on the text about use-editable HOT 10 CLOSED

I haven't been able to create a reproduction for this, so I unfortunately do have to ask you whether you can create a quick CodeSandbox that can reproduce this reliably, with some "click instructions". I've been trying all sorts of combinations of selecting, clicking, deselecting, clicking, etc in Firefox and Chrome, and can't quite get it to reproduce this reliably.

from use-editable.

I've found a slot to test it. The error occurs when a change is happens on the onClick event of an element. Here you have a case:
https://codesandbox.io/s/use-editable-forked-j9itq?file=/src/Edit.js

And a video with reproduce steps:

from use-editable.

Hello, any updates in this one? cc: @kitten

from use-editable.

I've been investigating a bit by my own and find out that the problem might be related with this code:

  useLayoutEffect(() => {
    state.onChange = onChange;

    if (!elementRef.current || opts!.disabled) return;

    state.disconnected = false;
    state.observer.observe(elementRef.current, observerSettings);
    if (state.position) {
      const { position, extent } = state.position;
      setCurrentRange(
        makeRange(elementRef.current, position, position + extent)
      );
    }

    return () => {
      state.observer.disconnect();
    };
  });

Commenting this piece of code makes the bug disappear, but OFC I assume that this is necessary.

cc: @kitten

from use-editable.

Your sandbox seems to be using Slate..?

from use-editable.

Hello @Ontopic I've fixed the codesandbox, sorry and THX for the heads up!:
https://codesandbox.io/s/use-editable-forked-j9itq?file=/src/Edit.js

from use-editable.

I had a quick look, what I think might be worth exploring is your direct call to setSelection; that rerenders your component (since it changes the useState value). So when you click, it shortly moves the cursor to the right position, but immediately rerenders and "resets" the cursor. Will have a better look later. Let me know if you find anything.

from use-editable.

Couldn't resist quickly trying out not putting select in a useState.

import React, { useState, useRef, useCallback } from "react";
import { useEditable } from "use-editable";

export default () => {
  const [txt, setTxt] = useState("Text");
  const editorRef = useRef(null);
  // const [selected, setSelected] = useState(false);
  const status = useRef({
    selected: false
  })
 
  const onEditableChange = useCallback((value) => {
    console.log(`"${value}"`)
    setTxt(value.slice(0, -1))
  }, [])

  const Edit = useEditable(editorRef, onEditableChange, {
    disabled: false,
    indentation: 2
  })

  return (
    <div
      className="App"
      ref={editorRef}
      // onClick={() => setSelected(!selected)}
      onClick={() => (status.current.selected = !status.current.selected)}
      
      style={{ backgroundColor: status.current.selected ? "gray" : "white" }}
    >
      {txt}
    </div>
  );
};

This at least fixes your bug, but selection is only shown when rerendered (so after setTxt is called). You can work around this in several ways, but I don't think your selected state should go through an onClick anyway. What if the editable is focused on page load, f.e., or entered through keyboard navigation? Trying with onFocus and onBlur would be more stable.

from use-editable.

I'm pretty sure that this shouldn't happen no matter which implementation do we have. Using a reference to avoid a re-render onClick IMHO is not a realistic solution that scales well. I've been trying older versions of the library and it seems that in previous versions this bug wasn't happening.

from use-editable.

A pr has been oppened.

from use-editable.