search

near / react-on-chain

Improved execution layer for NEAR decentralized frontend components
https://roc-docs.near.dev/
23 stars 5 forks source link

Bug: Input cursor is moved to the end of the text while typing #378

Open pavelisnear opened 2 months ago

pavelisnear commented 2 months ago

Using the ComponentSource input and trying to edit the middle of the text leads to the unexpected cursor behaviour.

https://github.com/near/bos-web-engine/assets/156711570/f4ac34b5-2c4d-49bf-9c0e-44d0bc6bc6ab

andy-haynes commented 2 months ago

This is likely happening for all text inputs. Each time a character is entered, the Component in the iframe is invoking its useState setter. This causes a re-render of the outer DOM, which I'm guessing causes the input to lose and reacquire focus.

If the outer application tracked interactions like this, it could potentially intercept the focus disruption and place the cursor in the correct position. I imagine you could do this with focus/blur listeners on text inputs in the outer DOM that can detect or query whether the event happened as a result of a Component re-render.