Controlled Input loses cursor position on value change.

[ac1dr3d]

cursor jumps to the end when input is edited and its value is set from atom. it does not keep its current place while typing...

[bcambel]

I am also having the same issue!

[gadfly361]

@ac1dr3d @bcambel Unfortunately this is out of scope for soda-ash (which is an extremely thin translation from react to reagent) as the issue is upstream. This is a known issue with controlled inputs that reagent actually solves (https://github.com/reagent-project/reagent/issues/79), but by using semantic ui react, the bug is reintroduced and you miss out on reagent's cute little hack.

[ac1dr3d]

bye bye soda then... was fun to use it.

[gadfly361]

@ac1dr3d If this is your main sticking point, an option that you could try is to use semantic ui classes on a [:input ] rather than the sa/Input component.

[ac1dr3d]

@gadfly361 in that case I have to import more libraries and more files... aaand I don't want to do that. I'll just stick with Bulma from now on... lesson learned.... born to crawl - cant fly. nice try tho... plus bulma is lighter... coz its on CSS totally.

[gadfly361]

@ac1dr3d You wouldn't need to import anything new (no additional dependencies). You get the semantic ui classes from this:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.0/semantic.min.css"></link>

which you already have to include when using soda-ash. However, I like Bulma and I wont dissuade you from using it.

As an aside, I encourage you to be more respectful in your future communications with the open source community.

[ac1dr3d]

Well you must be very non-humor personality so ok... no problem there mate. I liked your comment till I get to the end... Guess github have its trolls too... like slack. oh and let me highlight your username here buddy @gadfly361

[apostolou]

hello @gadfly361

thank you for this nice and convenient library! I just wanted to add another annoying issue probably due to this cursor position one that I’ve experienced in case it happens to somebody else. (I don’t expect a fix in soda-ash given its nature of course). When using input fields for login (one of text type and one of password type) the browser (chrome) upon saving the login password was missing the last character of the password when hitting enter after filling the two inputs.

I spent quite some time trying to understand and indeed the workaround of using regular input fields instead of sa/FormInput solved it. Thanks,

[gadfly361]

@apostolou Thanks for reporting this issue! You are correct that a fix is out of scope for soda-ash. That said, I'd like to try to reproduce and maybe I can add an FAQs section with inputs and this particular edge case.

Do you happen to have a code snippet to get me started in reproducing this?

[apostolou]

Hello @gadfly361 , thank you for your reply and sorry for taking my time to answer. You can find a code example below (using re-frame). When ticking the checkbox, if you type a 6 digit password the browser saves only the 5 digits. This doesn't happen when the checkbox is not ticked (=> with regular :input html fields). However, I observe that the cursor position is lost in both cases.

Hope this helps and please let me know if you have some ideas for a workaround for the cursor issue.

thanks

(defn- input-with-icon [semantic? options icon]
  [:div.ui.input.left.icon
   {:class "large"
    :style {:margin "0.5em"
            :width "25em"}}
   (vector (if semantic? sa/FormInput :input) options)
   [:i {:aria-hidden "true" :class (str icon " icon")}]])

(defn login []
  (let [{:keys [email password semantic?]} @(rf/subscribe [::subs/display-data [:login-panel]])]
    [sa/Grid
     {:text-align "center"
      :vertical-align "middle"}
     [sa/GridColumn {:width "12"}
      [sa/GridRow {:text-align "center"
                   :style {:margin "1em"}}

       [sa/Checkbox
        {:required true
         :label (r/as-component [:label "use react-semantic-ui input"])
         :checked (or semantic? false)
         :on-change  #(rf/dispatch
                       [::events/display-data [:login-panel :semantic?] (.-checked %2)])}]]
      [sa/GridRow
       [sa/Header
        {:text-align "center",
         :color "blue",
         :as "h2"
         :style {:margin "1em"
                 :font-size "1.3em"}}
        (str "Log-in with " (if semantic? "react-semantic input" "regular input") " fields")]]

      [:form {:on-submit #(rf/dispatch [::events/http-post-login email password])}
       [sa/Grid
        [sa/GridColumn
         [sa/GridRow
          [input-with-icon
           semantic?
           {:type "email"
            :placeholder "email"
            :value (or email "")
            :on-change
            #(rf/dispatch [::events/display-data [:login-panel :email] (-> % .-target .-value)])}
           "user"]]

         [sa/GridRow
          [input-with-icon
           semantic?
           {:type "password"
            :placeholder "password"
            :value (or password "")
            :on-change
            #(rf/dispatch [::events/display-data [:login-panel :password] (-> % .-target .-value)])}
           "lock"]]
         [sa/GridRow
          [sa/Button
           {:style {:margin "1em"}
            :color "blue"} "Login"]]]]]]]))