1

I have a big application written in elm, and I encountered a very strange issue in Safari: text inside input fields cannot be selected. Moreover if I click in the beginning of the input field, the cursor jumps to end. First I thought this bug only occurs in one specific page, but then it turned out, that if I navigate from this page to another, on the new page the input fields also happen to act buggy (otherwise not). The page that causes the bug is rather complex, but the input field is pretty simple:

styled input
    [ Css.marginTop (Css.px 5)
    , Css.marginBottom (Css.px 15)
    , Css.padding (Css.px 10)
    , Css.width (Css.pct 100)
    , Css.boxSizing Css.borderBox
    ]
    [ type_ "text", onInput UpdateNewCardTitle, value card.newCardTitle ]
    []

After rendering it look like this in Safari:

<input class="_9af14711" type="text">
   <div contenteditable="plaintext-only">This is the text inside</div>
</input>

The html element gets it's css styling from different places, so it would be rather difficult to attach. Bottom line: the issue only appears in Safari, also tested in Opera, Firefox, Chrome.

Does someone has an idea what could the issue? Or how to debug the exact place of it?

csuvikv
  • 51
  • 2
  • 1
    I think your issue is happening because of div being content-editable, there is a solution in the link I am posting which might help you. https://stackoverflow.com/questions/3972014/get-caret-position-in-contenteditable-div – Aman Seth Nov 08 '19 at 12:51

0 Answers0