search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.5k stars 260 forks source link

[input][password type][mobile]: input field had a delay when type is password #9760

Open gaeun-gabie opened 2 weeks ago

gaeun-gabie commented 2 weeks ago

Bug Description

Bug Description component: https://sap.github.io/ui5-webcomponents-react/v1/?path=/docs/inputs-input--docs when using mobile device, there is one or two seconds delay on showing dot icon in password input field.

image

Affected Component

input

Expected Behaviour

shouldn't have a delay

Isolated Example

No response

Steps to Reproduce

  1. enter the following link using mobile device (https://sap.github.io/ui5-webcomponents-react/v1/?path=/docs/inputs-input--docs)
  2. change input type to password
  3. start typing on the input text field
  4. see the delay on showing the typed in characters
  5. if you can't repro close the tab and open a new tab and repeat part 1 to 4

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

version doesn't matter, can repro on the document (latest version)

Browser

Safari

Operating System

ios

Additional Context

No response

Organization

SAP Cloud

Declaration

elenastoyanovaa commented 2 weeks ago

Hello @gaeun-gabie ,

I have prepared a sample with native input and a ui5-input, both with type password: sample I do not see any delay or difference between the two input fields. The ui5-input behaves exactly the same as the native one. I am also unable to play the video you provided, but if the issue you are reporting is related to the fact that the last typed character is always shown, the same behavior is present in the native input field as well. I am closing the issue as a consultation, but if there is some other issue, please provide us with a sample or adjust the one I prepared + a video which could be played will be helpful as well.

Kind Regards, Elena

gaeun-gabie commented 2 weeks ago

Hi @elenastoyanovaa, I also tested with the provided sample, but wasn't able to see a delay. So, the issue is that when I type in a character, the cursor moves to the right but then nothing shows up one the left side (it's adding just an empty space). But, after one second, dot appears. I wasn't able to repro the issue in the sample that you provided, but the issue was reproducible in https://sap.github.io/ui5-webcomponents-react/v1/?path=/docs/inputs-input--docs

https://github.com/user-attachments/assets/f48c1eba-9571-4c6c-ae1c-644ec13d2fe8

elenastoyanovaa commented 2 weeks ago

Hello @MarcusNotheis @Lukas742 ,

It seems that this side effect is related to the react input component and the issue is not reproducible with plain input or ui5-input. Could you please transfer the issue?

Kind Regards, Elena

Lukas742 commented 2 weeks ago

Hi @elenastoyanovaa @gaeun-gabie

I've checked the behavior, and for me, it's the same with or without our wrapper. I couldn't reproduce it using the iOS Simulator, only on a physical device.

It seems to be the default behavior for input elements with type "password" on iOS devices, as there's no difference between a standard input and the ui5-input web component. The delay is likely there for accessibility reasons, allowing users to briefly see what they've typed. Unfortunately, I can't record this issue because iOS detects active screen recordings and omits the delay, probably to prevent sensitive information from being accidentally shared.

Tested with your sample (v2).

Hi @elenastoyanovaa, I also tested with the provided sample, but wasn't able to see a delay. So, the issue is that when I type in a character, the cursor moves to the right but then nothing shows up one the left side (it's adding just an empty space). But, after one second, dot appears. I wasn't able to repro the issue in the sample that you provided, but the issue was reproducible in https://sap.github.io/ui5-webcomponents-react/v1/?path=/docs/inputs-input--docs

I wasn't able to reproduce this issue on a desktop device using Safari, neither in the linked docs, nor in the ui5 web component docs. Could you please provide the OS and Safari version you're using? Additionally, I don't see a 1 second delay in the video, am I missing something here?