Skip to content
This repository has been archived by the owner on Nov 13, 2018. It is now read-only.

<textarea> resets caret position in MS Edge #55

Open
fsoikin opened this issue Jan 20, 2017 · 3 comments
Open

<textarea> resets caret position in MS Edge #55

fsoikin opened this issue Jan 20, 2017 · 3 comments

Comments

@fsoikin
Copy link

fsoikin commented Jan 20, 2017

Issue: In Microsoft Edge, a <textarea> element whose content is bound to model in some way doesn't keep caret position between model updates.

Works fine in Chrome and FireFox. I can't be sure that the issue is with Fable.Arch and not with VirtualDom or with MS Edge. But since both VirtualDom and Edge are widely used, I think I can reasonable expect bugs like this to get fixed quickly.

App code:

open Fable.Core.JsInterop
open Fable.Arch
open Fable.Arch.Html
open Fable.Arch.App

let initModel = ""

let view model =
    div []
        [ textarea [onKeyup (fun e -> unbox<string> e?target?value)] [text model]
          span [] [text model] ]

let update model msg = msg, []

createApp initModel view update Virtualdom.createRender
|> withStartNodeSelector "#root"
|> start
|> ignore

Behavior in Chrome: (normal)
fable-textarea-chrome gif

Behavior in MS Edge: (buggy)
fable-textarea-edge gif

@fsoikin fsoikin changed the title <textarea> resets caret to the beginning in MS Edge <textarea> resets caret position in MS Edge Jan 20, 2017
@MangelMaxime
Copy link
Member

Hello @fsoikin ,
the behavior your are experimenting is due to Edge when you set the textContent value Edge reset your cursor position.

By using the property value the update is working as expected.

open Fable.Core.JsInterop
open Fable.Arch
open Fable.Arch.Html
open Fable.Arch.App

let initModel = ""

let view model =
    div []
        [ textarea [onKeyup (fun e -> unbox<string> e?target?value)
          property "value" model
        ] []
          span [] [text model] ]

let update model msg = msg, []

createApp initModel view update Virtualdom.createRender
|> withStartNodeSelector "#root"
|> start
|> ignore

@fsoikin
Copy link
Author

fsoikin commented Jan 20, 2017

Using property "value" instead of content does help the "resetting caret" behavior, but now the whole app kinda "skips" keystrokes sometimes - i.e. some keystrokes just don't get reflected either in the <textarea> or in the <span>, as if they never happened (if this description is not clear I can probably produce another animated gif for you).

What's worse, this keystroke skipping happens in Chrome, FireFox, and Edge (haven't checked any other browsers).

My intuition tells me that this looks like some race condition somewhere, but I haven't debugged.

@MangelMaxime MangelMaxime reopened this Jan 20, 2017
@MangelMaxime
Copy link
Member

I will need to take a dipper look so. Sorry for the inconvenience

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants