search

webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
744 stars 66 forks source link

www.open-resume.com - Pressing the "Space" key in content editable causes Firefox to create a new line character #124217

Open xitanggg opened 1 year ago

xitanggg commented 1 year ago

URL: https://www.open-resume.com/resume-builder

Browser / Version: Chrome 114.0.0 Operating System: Windows 10 Tested Another Browser: Yes Edge

Problem type: Something else Description: Pressing space in content editable causes Firefox to create a new line character Steps to Reproduce: Hi there, I am the creator of the open source project open-resume.com. I am using a content editable div to allow users to enter their work experience descriptions. I run into an issue with firefox where if user enters space in the content editable div (if it is at the end of line), Firefox returns it as a new line character \n in innerText. This causes usability issues to users and an issue has been created https://github.com/xitanggg/open-resume/issues/15.

To reproduce this, you can

  1. Visit https://www.open-resume.com/resume-builder
  2. Click Description textbox under Work Experience
  3. Enter some characters followed by space
  4. Observe a new line is created and textbox lose focus (This issue doesn't occur on Edge or Chrome)

To debug this issue, you can

  1. Visit thg codesandbox setup created https://codesandbox.io/s/contenteditable-innertext-debug-kf5psc?file=/src/index.js
  2. Open Console in codesandox
  3. Enter b in the textbox, observe it prints "ab"
  4. Enter space in the textbox, observe it prints "ab" follow by a new line (Firefox) instead of "ab " (Chrome, Edge)
    View the screenshot Screenshot
Browser Configuration
  • None

From webcompat.com with ❤️

softvision-raul-bucata commented 1 year ago

We appreciate your report. I was able to reproduce the issue following the steps to reproduce:

Screenshot_6

Tested with:

Browser / Version: Firefox Release 114.0.2 (64-bit)/ Firefox Nightly 116.0a1 (2023-06-28) (64-bit) /Chrome Version 114.0.5735.134 (Official Build) (64-bit) Operating System: Windows 10 PRO x64

Notes:

  1. Reproducible regardless of the status of ETP.
  2. Reproducible on the latest build of Firefox Nightly and Release.
  3. Works as expected using Chrome:

Screenshot_7

Moving this to NeedsDiagnosis for further investigations.

[qa_26/2023]

xitanggg commented 1 year ago

Hi there, I implemented a fallback component to work around this issue, meaning the issue can no longer reproduces in open-resume's website. If you are looking into this issue, can you use the sandbox test step?

  1. Visit thg codesandbox setup created https://codesandbox.io/s/contenteditable-innertext-debug-kf5psc?file=/src/index.js
  2. Open Console in codesandox
  3. Enter b in the textbox, observe it prints "ab"
  4. Enter space in the textbox, observe it prints "ab" follow by a new line (Firefox) instead of "ab " (Chrome, Edge) image Above is a screenshot of what I notice between Chrome and Firefox by typing b followed by space. I notice Firefox also adds a <br> to innerHTML even though I only press a space, which is interesting.