The CSS white-space Property and JavaScript

I have a relatively large AngularJS component called Extend Text. This past weekend I was working on adding parsing functionality so you could use it for something like a query builder but I started to run into a really strange problem I had not come across before.

The issue I ran into was that when retrieving the value from the textarea element, if the textarea ended with a space, it was not your standard space, it was a unicode non-breaking space (\u00a0). When I did a console.log() on the value, it looked like a space however when doing a comparison to ' ', it was resulting false. After spending a few hours debugging the components JavaScript code, it turned out that the had nothing to do with the JavaScript code, it was the CSS.

The textarea had the white-space property set to nowrap. Now I can't remember why I did that, I sure I had a good reason as that time, but it was not needed. After reading the MDN documentation on the white-space property, it did make since what was happen. With setting the white-space property to nowrap, it was causing the ending space of the textarea to be saved as a unicode non-breaking space \u00a0. Luckily, I did not need the property so I was able to fix the issue just by removing it.

Just goes to show that something you might think is completely un-related is the root cause of the issue. I would have never thought to instinctively look at CSS for an issue with the output of the value for a JavaScript DOM element.