UseEditable keeps `state.position` after blur, and steals focus on rerender about use-editable HOT 4 OPEN

After looking into this a bit. It appears the issue is a result of this useLayoutEffect.

When the current range is set, it draws the focus of the browser automatically. Then it is focused yet again with the call indicated by the OP.

Since no dependency array is passed in, the effect will get called on every react render. As far as I can tell, that is unnecessary. You should be able to declare the dependency array as follows:
[elementRef, onChange, opts, state, state.disconnected, state.observer, state.position]

@kitten I believe the above catches all scenarios in which the position needs to be set, etc. without taking focus from other elements unnecessarily but you could probably better say whether that is true or not.

I'm happy to create a PR if that makes things any easier for you.

from use-editable.

+1, this library is great, thank you for providing it.

I wanted to mention that I've noticed this behavior as well. I found that if I click outside any editable areas, then focus isn't stolen - but if I go directly from my editable <pre> area that's controlled by this hook, to a normal text area that isn't controlled by this hook, I see the behavior described here.

from use-editable.

I have solve this focus issue by handling element's focus with a local state and using useEditable's disable option:

function EditableText({ as, text, onChange }) {
  const editorRef = useRef(null)
  const [hasFocus, setHasFocus] = useState(false)

  useEditable(editorRef, onChange, { disabled: !hasFocus })

  return React.createElement(
      as,
      {
        ref: editorRef,
        onClick: () => setHasFocus(true),
        onBlur: () => setHasFocus(false),
      },
      text
    )
}


// (EditableText is used in this way)

const [value, setValue] = useState()

const onChange = useCallback((text) => {
  setValue(text)
}, [])

<EditableText as="h1" text={value} onChange={onChange} />

from use-editable.

It looks like the above works as long as opts is not changing. We could either switch to only using opts.disabled in the dependencies array (which might need eslint-disable-next-line react-hooks/exhaustive-deps) or it would be an expectation for end users to ensure that opts is memoized with something along the lines of this:

const options = useMemo(() => ({
    disabled: disabled,
}), [disabled]);

useEditable(editorRef, onEditableChange, options);

from use-editable.