Defective behavior of date-picker when deleting

[egg-juxt]

I am experiencing some unexpected cursor jumps when deleting a date-picker using the backspace key. This happens when date-picker is created with the property:

                 :render-input (react-component [props]
                                 [text-field props])

as in this example.

The cursor behaves correctly with the property:

       :renderInput (fn [params]
                      (r/as-element
                        [mui/text-field (js->clj params)]))

Why is this?

[arttuka]

Looks like DatePicker is setting the cursor position when you type in the text field. If it is a Reagent input, Reagent also tries to set the cursor position which causes the cursor to jump unexpectedly.

The solution is to render a React input instead of a Reagent input:

(:require [react :as react]
          ["@mui/material/TextField" :as MuiTextField])

:render-input (fn [params] (react/createElement MuiTextField/default params))

Using js->clj fixed the issue by accident. It caused invalid props to be passed to mui/text-field so a default input was rendered instead of the custom Reagent input.

[egg-juxt]

Thanks, appreciate your help on this!