FormidableLabs / FormidableLabs/use-editable
UseEditable keeps `state.position` after blur, and steals focus on rerender
- 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.