use-editable icon indicating copy to clipboard operation
use-editable copied to clipboard

Defocus every first typing

Open Planxnx opened this issue 1 year ago • 1 comments

When you try to type the text for the first time, it will re-render and defocus from the input box. So you need to select the input box and type again (it's annoying)

My workaround is force re-rendering for the first load. Is there another solution to fix this problem ??

Here is an example: code sandbox.

Environments

- astro: 4.0.3
- @astrojs/react: 3.0.7
- react: 18.2.0
- use-editable: 2.3.3
- prism-react-renderer: 2.3.0

Planxnx avatar Dec 10 '23 20:12 Planxnx

TLDR: Try adding tabIndex={-1} to the container.

I also ran into this problem. It seems to be related to Chrome/Chromium, I haven't seen the problem in Firefox or Safari. use-editable already seems to have a workaround for this, see the code.

Adding tabIndex={-1} may be needed for the workaround to function, see BugEditor.tsx:21 in the updated code sandbox.

keenbug avatar Jan 17 '24 08:01 keenbug