DatePicker React 18, edit text causes cursor to jump to end in Inputfield

[rsantosAdnovum]

When directly editing the date in the Inputfield, the cursor jumps to the end after every key press, easy to see when trying to edit text at the start or middle

Expected Behavior

• Edit the Inputfield date directly, expecting the cursor to stay in place after a key press

Current Behavior

• Editing part of the date in the Inputfield somewhere in the middle or start will cause the cursor to jump to the end after an input
• This behaviour only happens on React 18

Steps to Reproduce

https://axa-ch-webhub-cloud.github.io/plib-feature/develop/?path=/story/examples-datepicker-react--datepicker-controlled-inputfield

1. Edit date in the Inputfield next to the DatePicker
2. Cursor jumps to end

Context (Environment)

OS: RHEL8 Browser: Firefox DatePicker version: any/latest

Possible Solution

Similar behaviour has occurred on the Input-Text component before, as described in this issue. A fix was made for the Input-Text component, though it isn't perfect as mentioned in this comment, still would be nice to have as a temporary fix for the DatePicker component also.

[markus-walther]

@rsantosAdnovum Could you try to use the datepicker as an uncontrolled component?

Background: React's troublesome idea of fighting with native built-in HTML elements - i.e. controlled components - is the likely cause for the behaviour you report. As you also report, it is inconsistent among browsers and/or OSes.

So, why don't you try this: Just never set the value property, instead use defaultValue if you need to preset an initial value. Please report back here whether this works for you.

[andreferreiraADN]

Hello @markus-walther , I was looking into this with @rsantosAdnovum .

Although using the defaultValue instead of the value property does get us a bit closer, it is still not 100% what we want. Our dates need to be padded (e.g. we want '01.01.2020' instead of '1.1.2020') and currently what happens is that we get '1.1.2020' initially and only after clicking and selecting a new date will it be padded. I took a look at https://github.com/axa-ch-webhub-cloud/pattern-library/blob/31b30908073fa8e9a1537c9599fcf2819ff3a1a2/src/components/20-molecules/datepicker/index.js and I think this is because .getDate and .getMonth are used, but I'm not sure.

Currently having the values padded is a requirement that is broken and changing our validation seems to be a less than ideal workaround...