search

Traewelling / traewelling

Free check-in service to log your public transit journeys
https://traewelling.de
GNU Affero General Public License v3.0
225 stars 45 forks source link

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 9 months ago

SoraCent commented 9 months ago

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.

HerrLevin commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

I'm also not able to reproduce this on

Used following body for this:

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
NyCodeGHG commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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:

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

pascalwittler commented 1 month ago

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)