Controlled input loses cursor with React 18 when input type is :email or :number #609
Closed as not planned
Description
Inputs of type :email and :number exhibit the controlled-input cursor bug: as you type, the cursor will always reappear at the end end of the input. Inputs of type :text and :password don't exhibit this behavior.
Little repo to repro: https://github.com/flyingmachine/reagent-react-18-controlled-input
(ns main.app
(:require
["react" :as react]
["react-dom/client" :refer [createRoot]]
[goog.dom :as gdom]
[reagent.core :as r]
[reagent.dom.client :as client]))
(defonce root (createRoot (gdom/getElement "app")))
(defn text []
(r/with-let [text (r/atom "")]
[:input {:type :text
:on-change #(reset! text (.. % -target -value))
:value @text}]))
(defn email []
(r/with-let [text (r/atom "")]
[:input {:type :email
:on-change #(reset! text (.. % -target -value))
:value @text}]))
(defn number []
(r/with-let [text (r/atom "")]
[:input {:type :number
:on-change #(reset! text (.. % -target -value))
:value @text}]))
(defn app
[]
[:table
[:tbody
[:tr [:td "text"] [:td [text]]]
[:tr [:td "email"] [:td [email]]]
[:tr [:td "number"] [:td [number]]]]])
(defn ^:dev/after-load start []
(client/render root [app]))
(defn init
[]
(start))