Input Text: Fehler, wenn man den type auf "email" ändert. about pattern-library HOT 5 OPEN

Hi @christoph-schlumpf , could you please add the "Steps to Reproduce"?

from pattern-library.

Hi @thomas-krueger-axa,

I have added „Steps to reproduce“. I suspect this issue always happens in a React app. If you have an example where this issue does not happen inside React we would be glad to have a look at it.

Best regards,
Christoph

from pattern-library.

@christoph-schlumpf This is a consequence of using React with input components in controlled mode. Since that's one of the bad ideas of React, it's exceedingly hard if not impossible to override browser-native stateful HTML elements in all aspects. The error message says that for whatever reason a type-email input cannot set the selectionrange, i.e. where the cursor is. We added setting the selectionrange for another 'bug', also controlled mode. Of course we could fix this new issue by not setting selectionrange when input of type email is used, but the better approach - which we would ask to try - is to just use uncontrolled components, while still achieving your desired UX. Please report back here after you tried that systematic workaround.

from pattern-library.

Hi @markus-walther ,

We will have a look at your proposal to use the component in Uncontrolled mode. We will inform you about our results.

Best regards

PS: Please keep this issue open untill we can confirm that the proposed solution is OK in our UX.

from pattern-library.

Hi @markus-walther,
I can confirm that as an uncontrolled component the error does not happen. We were able to use an uncontrolled input-text in our UX. Thank you!

As many React applications use controlled components I would suggest that you nevertheless fix the issue. Additionally it would be very helpful to mention in the documentation on https://axa-ch-webhub-cloud.github.io/plib-feature/develop/?path=/story/components-input-text--input-text -> "Usage" that the component should only be used as an uncontrolled component in React because there are issues when it is used as a controlled component.

Best regards,
Christoph

from pattern-library.