Non-breaking space acts different than other characters - outputs " " in template when passed via props

[eibx]

Version

2.5.17

Reproduction link

https://codepen.io/avertes/pen/LYYpNRe
https://jsfiddle.net/50wL7mdz/756973/

Steps to reproduce

1. Create a new component that accepts a string prop.
2. Display the prop within the component's template.
3. Use the component in a Vue application and pass a string containing a non-breaking space character for the prop.

What is expected?

The output should contain a non breaking space

What is actually happening?

The output shows  

---

In the example provided I've made 3 cases

• First case is that   get turned into  
• Second case is that in a long list of UTF-8 characters only NON-BREAKING SPACE is escaped.
• And third when getting the same list of characters, but retrieving it from a regular HTMLElement with document.querySelector('#test').title the character aren't escape.

Note: When copying the non-breaking space character it might turn into a regular space in the clipboard. Therefor use https://en.wikipedia.org/wiki/Non-breaking_space#Keyboard_entry_methods to make sure how to insert the character.

[eibx]

I've added a new example - where in a list of html entities (including other whitespace and zero width characters) - only   not decoded.

• https://jsfiddle.net/50wL7mdz/765399/

Also I've noticed that in mathiasbynens/he there are two entries for   one without simicolon and one with simicolon.

• https://github.com/mathiasbynens/he/blob/master/data/entities.json#L1470

Might be a shot in the dark, but could this have any influence on the result above?

[eibx]

I've tried using mathiasbynens/he v1.1.1 to find any inconsistencies with  , but haven't been able to find any.

I've tried duplicating my previous jsfiddles, to see if   would react any different.

• https://jsfiddle.net/ebpcx1do/3/

If anyone can give me some pointers for where to look for this error, I'm more than happy to give it a shot.

I would also very much appreciate any response on issue.

[rosrosros]

Looks like a bug to me - a fix would be nice

[tmorehouse]

Ive noticed issues with × on occasion. say a component prop has a default of ×, which is rendered in the component (v-html). When rendering it shows the actual x character and causes an SSR hydration bail.

[approached]

Other example: https://jsfiddle.net/onbzk0m6/ (character  )

[eibx]

Yeah - it does seem to be related the way Vue parses html attributes in general.

I've made a similar example based of @approached example
https://jsfiddle.net/onbzk0m6/3/

[grreeenn]

as a workaround, try to put the JS escape code for   - \xa0

found here, worked for me in nonbreakinspacification function

    public static noBreakingSpaces(str: string): string {
        return str.replace(' ', '\xa0');
    }

strings returned by this function are being rendered with &nbsps instead of spaces.

[styxxx]

I stumbled upon the same issue: The html entity ­ results in"­" as text when used in templates instead of the soft hyphen. The same for "­" and others.
Vue 2.6.10

[lurein]

for folks that are looking for a workaround for this:
When passing a string with non-breaking spaces as a prop, I just replaced the spaces with characters unlikely to be part of the string, in my case 'zzz'
var newName = program_name.replace(/\s/g,'zzz');

Then, in the actual component where I need to display or use this prop, I have a computed function that undoes the above action and replaces the placeholder chars with spaces again

correctedProgramName(){ //this reverses the space-replacing we had to do in reporting-dashboard.js
        let correctedProgramName = this.program_name.replace(/zzz/g, ' ')
        return correctedProgramName
      }

[JuniorTour]

@posva Sorry to trouble you , I found a solution for this issue.

After my fix, the behavior of Vue will be the same as HTML, just like the screenshot below,

Can I pick up this issue and make a Pull Request?

[posva]

Sure @JuniorTour

This issue might be related to #10485 and #11059
So it's worth taking a look at the existing PRs as well

[corneliusk]

@posva
Can you or someone else please revisit this issue? @JuniorTour 's PR #11599 will fix the problem mentioned where a non-breaking space character entered in props is output as   in the template. This is causing problems for us in a project where we are passing translated strings to props and need to preserve nbsp, and it would be great to have this in place rather than having to do a string replace on everything coming back from translation. Thanks!