Inconsistent Behavior of Softwrap Property in Textarea Across Browsers
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 202
- Forks
- 43
- PR merge metrics
- No merged PRs in 30d
Description
Expected Behaviour:
When the cursor is placed at the beginning of a line in a textarea with the softwrap property and the space key is pressed, the cursor should remain on the same line, and spaces should be added to the current line.
Actual Behaviour:
- In Chromium-based browsers, pressing the space key at the beginning of a line moves the text to the next line along with the cursor. Subsequent spaces keep adding new lines.
- In WebKit-based browsers, pressing the space key at the beginning of a line keeps the cursor at the beginning and adds spaces to the previous line.
- In Firefox, pressing the space key at the beginning of a line keeps the cursor on the same line, and spaces are added to the current line.
Impact:
- The inconsistent behaviour across browsers affects the user experience and can lead to confusion and incorrect text formatting in web applications that rely on the softwrap property in textareas.
Steps to Reproduce:
- Create a textarea with the softwrap property and add text that wraps to at least three lines.
- Place the cursor at the beginning of a line.
- Press the space key and observe the behaviour in different browsers (Chromium-based, WebKit-based, and Firefox).
Here is a quick link to repro: https://codepen.io/pranavmodi/pen/raNPRXG
Proposed Specification Change:
- The specification should follow the behaviour observed in Firefox, where pressing the space key at the beginning of a line keeps the cursor on the same line and adds spaces to the current line. Visually, when a user presses the space key, the space should be visible to the user as they are entering it. In the current behaviour of Chromium-based and WebKit-based browsers, this is not the case, leading to a confusing user experience. The proposed change ensures that the space is visibly added to the current line, providing a more intuitive and logical experience for the user.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodePen reproduction and compare the textarea softwrap behavior in Chromium, WebKit, and Firefox. Read the relevant textarea and softwrap specification text, then determine whether the Firefox behavior can be specified consistently across engines. Done means an agreed specification change that clearly defines cursor placement and visible spaces at wrapped line starts.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 25/100