FormidableLabs / FormidableLabs/use-editable

UseEditable keeps `state.position` after blur, and steals focus on rerender

Open
#16 4 comments 3 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
619
Forks
16
PR merge metrics
No merged PRs in 30d

Description

Hi! I have
* an "editable" div, next to
* a text input that controls the styling div's text.

The text input is not controlled by `use-editable`. When the text input's value changes, the editable div rerenders.

If I have never edited the contents of the div, focus stays inside the text input as expected. If I first type some content into the div and then type inside the text input, the focus jumps into the div.

I can put together a simple snippet demonstrating if it'd help you reproduce the issue. But I think the main idea is that

* `state.position` starts `null` [here](https://github.com/FormidableLabs/use-editable/blob/main/src/useEditable.ts#L189), and things behave fine.
* Later, when `state.position` is non-null, `use-editable` forcibly focuses the div on rerender. I think. Maybe [this line](https://github.com/FormidableLabs/use-editable/blob/main/src/useEditable.ts#L286).

Not sure of the ideal solution -- listening for blurs, or checking the window's selection or something. I've worked around it by forcing the div to remount on blur, which isn't ideal but it's not blocking me.

(Very cool library, thanks for writing it!)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.