Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Frontend Character Counter shows wrong number of Chars when there are emojis or newlines and doesn't show any Error Message. #2070

Open
SoraCent opened this issue Oct 17, 2023 · 6 comments
Labels
additional info needed bug Something isn't working

Comments

@SoraCent
Copy link

Describe the bug
When there are Emojis, Newlines, or other Special Characters, the Frontend Character Counter displays the incorrect number of characters. Before, while attempting to save the checkin, Träwelling displayed an error message. Even though the Frontend Character Counter indicated that there were fewer than 280 characters, the error message said that just 280 characters are allowed.
Data loss was avoided by the error message, but since it was deleted, all that had been written simply vanished after pressing the save button.

To Reproduce
Steps to reproduce the behavior:

  1. Checkin to a Train
  2. Write a lengthy text in the status message or use a generator.
  3. Remove some characters until the Frontend Character Counter reads less then 280 like 275 or 270.
  4. Add a few newlines and emojis, and check that it displays something around 278 or 280 characters.
  5. See how the input has disappeared and the checkin hasn't been created after saving it.

Expected behavior
To avoid losing the entire input, the Frontend Character Counter should count Special characters as accurately as it does in the Backend, or else it should display the Error Message again.

Screenshots
If applicable, add screenshots to help explain your problem.

  1. I generated an Lorem Ipsum with 275 Chars and added some new Lines
    grafik

  2. After pressing Check In! the Modal Closes, not creating the Checkin nor showing an Error Message and all I've written is gone
    grafik

Desktop (please complete the following information):

OS: Windows
Browser: Firefox
Version: 118.0.2

Smartphone (please complete the following information):

Device: Huawei P30 Pro
OS: Android 10
Browser: Firefox
Version: 119.0b9 #2015979707 d30a10afe7+

Also on Ipad with IpadOS 17 and newset Safari version

Additional context
Add any other context about the problem here.

@SoraCent SoraCent added the bug Something isn't working label Oct 17, 2023
@HerrLevin
Copy link
Member

I can't reproduce this behavior on neither my Mac nor iPhone. Are you sure it appeared on your iPad?

A quick duckduckgo search revealed that this might be caused by systems using \r which would explain Windows.
I'll look into it.

@HerrLevin
Copy link
Member

Still can't wrap my head around it b/c the textarea is limited to 280 characters. Imho this is more a browser problem than a problem on our side. (Except the missing warning. But that should be fixed soon by another PR.)

@MrKrisKrisu
Copy link
Member

I'm also not able to reproduce this on

  • Ubuntu 22.04.3 LTS with Chrome
  • Ubuntu 22.04.3 LTS with Firefox
  • Android 14 with Chrome
  • Android 14 with Firefox

Used following body for this:

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

@NyCodeGHG
Copy link
Contributor

I was able to reproduce it on Windows 11 (Build 22621) in Firefox 118.0.2 as well as on Google Chrome 118.
On firefox i got redirected to this site:
grafik

On chrome nothing happened and the status just didn't change when trying to edit.

Used following body:

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
B

@NyCodeGHG
Copy link
Contributor

According to the spec the text in textarea elements should use LF (\n) for line breaks, and according to my local javascript console, this is the case, so I'm really confused on whats going on here

@SoraCent
Copy link
Author

SoraCent commented Oct 20, 2023

I also tested it again and still the Modal just gets closed and the Checkin isn't created.

I generated a Lorem Ipsum with 275 Characters and added 3 new Lines, the Counter showed 278 Characters.

I tested it on:

  • A Windows 11 PC. I used Firefox and Chrome, I also looked in the Javascript Console, both making the newlines to \n.
  • An Android Phone. There I also used Firefox, In the Javascript Console there its also making the newlines into \n.
  • An iPad with iPadOS 17.0.3. I used Safari, there I can't see what the newlines are turned into.

I used this imput:

Lorem ipsum dolor sit
 amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua. At vero 
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem i

I also found a Screenshot of the Old Error Message:
Unbenannt

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
additional info needed bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants