pattern-library icon indicating copy to clipboard operation
pattern-library copied to clipboard

Published 20 hours ago • verified publisher icon axa-ch-webhub-cloud

Controlled Input Text won't render updated value

Open branislav-remen opened this issue 3 years ago • 3 comments

Controlled Input Text won't render updated value when field already had some focus on it in Safari browser.

Expected Behavior

In Safari browser, when we set value to controlled input text, value should be visible in the field.

Current Behavior

When we set value to controlled input text, new value is not visible in the field in Safari browser.

Steps to Reproduce

https://patterns.axa.ch/?path=/story/examples-input-text-react--controlled-uncontrolled

  1. Open link above

  2. Click to first field = add focus (in images Safari on the left, Chrome on the right side) image

  3. Click to second field. image

  4. Change value in the first or second field (In screenshot I changed in the second field). In chrome - value is changed in both fields. In safari - value is changed only in second field. image

Note: It works when you won't add focus to the second field. Just click only to first field (with label Controlled *) and change value. It works in both browsers.

image

image

Context (Environment)

example from pod-myaxa:

  1. When editing Communication data block, we have option to fill email field by clicking on Link. It will set new value to email field.

  2. We click to link: image

  3. Form is now valid - email field is set but new value is not visible (only in Safari browser). image

env

macOS BigSur 11.6.1 The latest version of component (bug is also in your storybook) Safari 15.1 (16612.2.9.1.30, 16612)

Possible Solution

🤔

branislav-remen avatar Nov 03 '21 11:11 branislav-remen

Thanks for this detailed issue. I'm not sure when we will be able to fix it as we are very low in number of staff at the moment.

raphaellueckl avatar Nov 12 '21 07:11 raphaellueckl

New test URL for reproduction: https://patterns.axa.ch/?path=/story/examples-input-text-react--input-text-controlled-uncontrolled

markus-walther avatar Aug 24 '22 09:08 markus-walther

Accepted, since I could reproduce it on MacOS Monterey 12.5.1 Safari Version 15.6.1 (17613.3.9.1.16).

markus-walther avatar Aug 24 '22 09:08 markus-walther

There was a Safari hack that caused this problem. To me it made no sense at all code-wise. Besides, everything runs fine in Safari, maybe there was a problem on a mobile Safari. The comment was about the cursor. As long as it's just an exceptional problem, we can live with it.

MKaHead avatar Sep 13 '22 12:09 MKaHead