Infinite loop in the reagent.impl.input wrapper

[roman01la]

Input fields wrapper in reagent.impl.input ns gets into an infinite loop when an input field goes in focus immediately after it was set a value. Note that the loop is async, thus it doesn't block UI thread. The issue is reproducible for any type of component: class-based with r/atom state, functional with r/atom state, functional with hooks state.

Repro

;; intercepting for debugging purpose
(defonce f reagent.impl.input/input-node-set-value)
(set! reagent.impl.input/input-node-set-value
      (fn [& args]
        (js/console.log "RUN")
        (apply f args)))

(def input-ref #js {:current nil})
(def query (r/atom nil))

(defn app []
  [:div
   [:input {:on-change #(reset! query (.. % -target -value))
            :ref input-ref
            :value @query}]
   [:button {:on-click #(do (reset! query "HELLO")
                            (.focus ^js/HTMLElement (.-current input-ref)))
             :name "tidy-new"
             :class "large"}
    "set value"]])

(reagent.dom/render [app] (js/document.getElementById "root"))

[Deraen]

If the input has focus, .-activeElement check in input-node-set-value is always true and input-component-set-value and input-node-set-value keep calling each other waiting on-change handler to update .-cljsDOMValue, which doesn't happen here as the update is triggered from code.

I wrote a PR to avoid this by forcing input-node-set-value to update cljsDOMValue when it is called after render, but I'm not sure if this is a correct fix.

Other workaround could be to listen for focus events and try to detect if the event is real or send from user code, but that would probably be quite unreliable.