reagent

kokonut 2024-12-25T15:02:15.497599Z

I am trying to create a very basic date input by drafting like this.

(defn date-input []
  (let [d (r/atom "2024-12-22")]
    (fn []
      [:input {:id :testing-date-input
               :type :date
               :value @d
               :on-change #(reset! d (-> % .-target .-value))}])))
But it seems I am not allowed to enter 2 consecutive digits for month or day. For example "12" for the month. When I type "1" and then "2", the month changes to "02" not "12". This behavior puzzled me, so I checked other frontend languages - in JS and F#, this error isn't observed. Probably I am missing something. Does anyone have a clue?

p-himik 2024-12-25T15:11:06.372249Z

I cannot reproduce it in Chrome. Reagent 1.2.0.

p-himik 2024-12-25T15:14:30.337109Z

Trying it this way: 1. After the page is rendered, 12/22/2024 is shown in the input 2. I click on 12, it gets selected 3. I press 1 - the subfield becomes 01 4. I press 2 - the subfield becomes 12, focus moves to 22

kokonut 2024-12-25T15:21:18.804819Z

That's interesting. I am also using Reagent 1.2.0. This is what I see when I typed in the UI as you said. At the step 4 of yours, the subfield becomes 02 .

kokonut 2024-12-25T15:23:08.914829Z

Were you using my code snippet above?

p-himik 2024-12-25T16:08:13.673979Z

Yes, this is the full code:

(ns hello-world.core
  (:require [reagent.core :as r]
            [reagent.dom :as rd]))

(defn date-input []
  (let [d (r/atom "2024-12-22")]
    (fn []
      [:input {:id        :testing-date-input
               :type      :date
               :value     @d
               :on-change #(reset! d (-> % .-target .-value))}])))

(defn main []
  (rd/render [date-input] (js/document.getElementById "app")))

kokonut 2024-12-25T16:27:17.686989Z

Ah, I am using reagent.dom.client/render (as opposed to what you use, reagent.dom/render) and that creates the issue.

kokonut 2024-12-25T16:35:33.453519Z

I am 👀 the code to see what's the diff between these render fns.