bug(text-field): When the mobile keyboard hides the text-field example, the text is written backwards, cursor positioning problem.

[julietafrade97]

📚 Docs or angular.io bug report

Description

When trying the input fields examples in mobile horizontal direction and the mobile keyboard hides de input that is being tested, the text appears written backwards. This happens because the cursor stays in the start of the string instead of the end.

🔬 Minimal Reproduction

What's the affected URL?**

https://material.angular.io/cdk/text-field/examples

Reproduction Steps**

1 - Open https://material.angular.io/cdk/text-field/examples on mobile
2 - The keyboard must be big enough to hide the input
3 - Write in any of the examples "1234"

Expected vs Actual Behavior**

Expected: The text written is "1234"
Actual: The text written is "4321"

📷Screenshot

The keyboard hiding the input:

The result after typing "1234":

The result after typing "12348" in case the keyboard is not hiding the input:

The result after typing "123" in case the keyboard is not hiding the input:

🌍 Your Environment

Browser info

Chrome for Android: 88.0.4324.93

[mmalerba]

This seems like a combination of the styling on our docs site which somehow prevents the input from being shown while typing (I'm not exactly sure how this happens, I tried repro-ing with a fixed position div and the input just pushed it out of the way). Combined with what seems like a Chrome bug that causes the input to be interpreted incorrectly when the input isn't shown.

It doesn't seem like a bug with the mat-form-field itself, so I'll move this issue to our docs repo.

[Splaktar]

@julietafrade97 can you please provide the device manufacturer, model, and Android version?

[Splaktar]

I am not able to reproduce this on https://material.angular.io/ with version 11.2.0 or on my local network running the site in dev mode with a Google Pixel 3 with Android 11. I tried with and without the number pad using the Swiftkey keyboard. I tried with the text field barely visible on the bottom of the screen, top of the screen, and in the middle of the screen before tapping the input. It was always the same, correct behavior for me.

That also raises the question, @julietafrade97 what keyboard app are you using?

[julietafrade97]

@julietafrade97 can you please provide the device manufacturer, model, and Android version?

I'm using a One Plus 6t with Android 10

[julietafrade97]

I am not able to reproduce this on https://material.angular.io/ with version 11.2.0 or on my local network running the site in dev mode with a Google Pixel 3 with Android 11. I tried with and without the number pad using the Swiftkey keyboard. I tried with the text field barely visible on the bottom of the screen, top of the screen, and in the middle of the screen before tapping the input. It was always the same, correct behavior for me.

That also raises the question, @julietafrade97 what keyboard app are you using?

I'm using the the default keyboard app and that's Gboard. Have in mind that I asked other people with different devices than me to reproduce it and, in the devices that the input was hidden because of the keyboard, it was reproducible. In your case when the keyboard appears does it hide the input?

[Splaktar]

I also tested this on an iPad with iPadOS 14.4 and I was unable to reproduce it.

Unfortunately, I don't have access to a One Plus device.

[Splaktar]

It mostly makes it hard to see, but I still see the ink bar and the input is just behind the toolbar, but not offscreen.

[Splaktar]

I expanded my keyboard a bit to fully cover the input, but it still came out 1234. I will try Gboard.

[julietafrade97]

I noticed that at the time I tried with the Angular version 11.1.0. Right now I can't reproduce it in 11.2.0 but I can in the older versions, for example, in version 10: https://v10.material.angular.io/components/input/overview. Can you also try in version 10?
Also, can you tell me what changed from 11.1.0 to 11.2.0 that could have fixed this?