1137650 - textarea with "white-space: nowrap; " no more allows to type a new line since FF 36.0

Status: RESOLVED INVALID

(Core :: DOM: Editor, defect)

Description

[obado]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/600.3.18 (KHTML, like Gecko) Version/8.0.3 Safari/600.3.18

Steps to reproduce:

An HTML page, containing a textarea, with the CSS "white-space:  nowrap;" : 

<textarea style="white-space: nowrap;overflow: auto;" cols="30" rows="4" ></textarea>


Actual results:

you cannot anymore type a new line in it, since FF 36.0. (in FF 35 and before, it worked)


Expected results:

When you type in "Enter" key, it must make a carriage return in the textarea.

I made a fiddle to help reproduce it here : http://jsfiddle.net/71huf7mb/4/

Comment 1

[Loic]

Regression range:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=7e3c85754d32&tochange=80e18ff7c7b2

Brian Marshall — Bug 82711 - Support CSS white-space property on textareas. r=bz

I'm not sure if it's a valid regression anyway.

Comment 2

[obado]

In case it's helpful, I just tested and confirm this bug also occurs on : 
* Mac OS X Firefox 36.0
* Windows Firefox 36.0
* Mac OS X Firefox Developper Edition 37.0a2

Comment 3

[Boris Zbarsky [:bzbarsky]]

Hmm.  So in Safari, in that sort of situation a newline in the actual value is ignored:

data:text/html,<textarea%20style="white-space:%20nowrap;overflow:%20auto;"%20cols="30"%20rows="4">abc&%2310;def</textarea>

but pressing enter does insert _something_ that ends up rendering as a newline.  Which is odd, because the styling explicitly says to collapse newlines to spaces.

However, I tested, and our new behavior matches IE11: pressing enter shows up as a space, as the styling requests.

Given that, I believe our behavior here is actually correct, as is IE's.

Comment 4

[Brian Marshall]

Yeah, this was an intentional change in bug 82711 to make white-space work the same for textareas as it does with other elements. You can use "white-space: pre-wrap" or "white-space: pre-line" if you want to preserve whitespace or newlines while wrapping.

Comment 5

[Brian Marshall]

Oh, and you can use "white-space: pre" to turn off wrapping while preserving white-space.

Comment 6

[obado]

Sorry, but I don't understand how an intentional change can make a textarea no more working as a textarea, but as a simple input. I use textarea because it handles multilines...

Comment 7

[obado]

(In reply to Brian Marshall from comment #5)
> Oh, and you can use "white-space: pre" to turn off wrapping while preserving
> white-space.

Thank You Brian. Yes I saw the "white-space: pre" works as "nowrap" was working before in FF, but not in other browsers (webkit)... :/

Comment 8

[obado]

(In reply to obado from comment #7)
> (In reply to Brian Marshall from comment #5)
> > Oh, and you can use "white-space: pre" to turn off wrapping while preserving
> > white-space.
> 
> Thank You Brian. Yes I saw the "white-space: pre" works as "nowrap" was
> working before in FF, but not in other browsers (webkit)... :/

... and I just tested in IE 11 : "white-space: pre" doesn't works as in FF 36 too. :/ (check my fiddle : http://jsfiddle.net/71huf7mb/4/ white-space:pre has a "nowrap" behavior only in FF 36.

Comment 9

[Boris Zbarsky [:bzbarsky]]

> Sorry, but I don't understand how an intentional change can make a textarea no more
> working as a textarea, but as a simple input.

Because the styles on the page explicitly ask for newlines to be treated as spaces.  The default textarea styles do _not_ do that.

> but not in other browsers (webkit)... :/

Define "webkit"?  "white-space: pre" works fine in Safari on Mac.  It prevents breaking on the spaces.

Unfortunately, it looks like Safari also styles textareas with "word-wrap: break-word", causing linebreaks in the middle of words.  So you need to add "word-wrap: normal" in addition to "white-space: pre".  If you do that, it works fine in Safari.  And in Chrome.  And in IE11.  See http://jsfiddle.net/71huf7mb/6/

Comment 10

[obado]

> Unfortunately, it looks like Safari also styles textareas with "word-wrap:
> break-word", causing linebreaks in the middle of words.  So you need to add
> "word-wrap: normal" in addition to "white-space: pre".  If you do that, it
> works fine in Safari.  And in Chrome.  And in IE11.  See
> http://jsfiddle.net/71huf7mb/6/

Thank you very much !!
You solve my problem ;)
Yes, the problem was the default "word-wrap: break-word" in Safari, causing "white-space: pre" not working as expected.

So, the solution  to replace the non-w3c compliant attribute "wrap=off" in CSS is that : 

.nowrap {
    white-space: pre;
    overflow: auto;
    word-wrap: normal;
}

Have a nice day ! ;D

Comment 11

[Loic]

According to comments #3 and #4, it's the correct behaviour.

Comment 12

[Thomas]

What about a scenario where you want:

a) The text to wrap in a <textarea> (i.e. no horizontal scroll bar)

b) The Enter key to work as normal (i.e. creates blank lines not spaces)

This used to be possible but I'm having trouble achieving it.  Is it still possible after the intentional change?

Comment 13

[Boris Zbarsky [:bzbarsky]]

"white-space: pre-wrap".

Comment 14

[Boris Zbarsky [:bzbarsky]]

And see https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap to the spec on that.

Comment 15

[Thomas]

Thank you, that worked. 
(In reply to Boris Zbarsky [:bz] from comment #13)
> "white-space: pre-wrap".