search

axa-ch-webhub-cloud / pattern-library

AXA CH UI component library. Please share, comment, create issues and work with us!
https://axa-ch-webhub-cloud.github.io/plib-feature/develop
126 stars 18 forks source link

Input Text: Fehler, wenn man den type auf "email" ändert. #2445

Open christoph-schlumpf opened 1 year ago

christoph-schlumpf commented 1 year ago

Der Input Text wirf einen Fehler, wenn man den type auf "email" ändert. Tritt bei der Verwendung als React Component auf.

Expected Behavior

Keine Fehlermeldung in der Console, wenn an InputText mit type 'email' verwendet.

Current Behavior

Error in der Browser Console: Uncaught DOMException: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('email') does not support selection.

Steps to Reproduce

  1. Put the Input Text inside a React Application (React18.x)
  2. Set the type to „email“
  3. Start the app
  4. Try to enter an email into the input text
  5. Error as discribed above is shown in the Console (e.g. Edge-Browser)

We alredy have shown the issue to a Webhub Developer and he confirmed the issue. Feel free to contaxt me so I can show you the issue in our app.

Context (Environment)

React Application. Wir benutzen axa-input-text: '6.3.0', axa-popup: '5.0.9'

Possible Solution

thomas-krueger-axa commented 1 year ago

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

christoph-schlumpf commented 1 year ago

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

markus-walther commented 1 year ago

@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.

christoph-schlumpf commented 1 year ago

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.

christoph-schlumpf commented 1 year ago

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