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

[SoraCent]

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

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

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.

[HerrLevin]

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]

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]

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]

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:

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

Used following body:

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
B

[NyCodeGHG]

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]

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:

[pascalwittler]

I was definitely affected by this problem at least twice in 2023 and 2024 and can confirm @SoraCent's bug description.

(Running Chrome on Android 13)