When changing content, the model becomes empty

[stivni]

A user pasted some content (from Word I guess) in a textAngular textarea, which was saved to the database, like this:

<p></p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);"><u><b>ATTITUDES:</b></u></p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);"><b>DOORZETTING</b></p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);">Kan omgaan met tegenslag.</p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);">Kan omgaan met winnen en verliezen.</p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);">Blijft zich inspannen.</p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);">Stelt nog te weinig vragen als iets niet zo duidelijk is.</p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);"><b>AANDACHT</b></p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);"><span>De aandacht is wisselvallig.</span></p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);"><b>INZET</b></p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);">Blijft proberen als iets niet lukt.</p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);">Vergeet soms te controleren.</p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);">Werkt niet te snel, maar nauwkeurig en ordelijker.</p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);"><b>ZELFSTANDIGHEID</b></p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);">Heeft begeleiding nodig bij sommige opdrachten.</p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);"><u><b>ALGEMEEN GEDRAG</b></u></p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);">Je hebt weer een grote inspanning geleverd</p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);">Je toonde veel interesse en werkte flink mee.</p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);">Er is al  een duidelijke verbetering bij schrift en orde. Knap!!</p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);"><span>Aangename leerling.</span><br/></p><p style="color: rgb(68, 68, 68);text-align: left;background-color: rgb(255, 255, 255);">Leuke jongen.</p><p></p>

myModyle.controller("myController", function($scope) {
    $scope.assessment = //the string above
}

<text-angular ng-model="assessment" id="assessment" />

When initialising a textarea with the same content (by assigning the above string to the scope model variable textangular uses for its model), the contents are displayed correctly and the model also still has the right content.

When clicking in the textarea, the content and the model are still correct.
When altering the contents of the textarea, the model becomes empty, the contents are still in the textarea.
When clicking out of the textarea (blur), even when nothing is modified, both the textarea and the model are emptied.

I guess the messy html above, is causing the issues, but what can I do to sanitize it? (As it was originally put in with a textAngular textarea)

I'm using 1.3.0-19 on Chrome.

[SimeonC]

Ahhhhh no, that's a bug from me, on my tests it actually gets through to the model then gets blanked out - it's detecting it as a blank input :(. I was trying out some "clever" logic that would allow me to check if there was no content without the regex parsing the whole string (very slow with large cases), I'll add this to the tests and fix it up.
I'll have that fixed up pronto!!

BTW, thanks for putting up your issues.

[stivni]

Hi Simeon,

The issue is not fixed with fe800b2. I think I goes a little deeper.

I also discovered that when typing some characters in the textarea, it does not get surrounded with a <p>-tag by default. And when hitting enter after this first line, the model is emptied (like above). When clicking out of the textarea, the textarea itself is also emptied.

After these steps, you can use textAngular as expected. It surrounds the first text with a <p>-tag and doesn't empty the model nor textarea anymore...

I will try to look into the issue a bit more, maybe try to simulate in a test, but I'm not sure I'll be able to figure that out...

[SimeonC]

Weird, when I tried your quoted code above in the current pre-release I can edit and blur the editor without loosing the data.

Is the new issue you mentioned similar to #463! Cause I was certain I'd fixed that one! (Also do you mean the RAW html textarea or the WYSIWYG editor?)

[SimeonC]

As a side note, AFAIK this and your other issue are the only two issues preventing me from releasing 1.3.0, so apart from other work and my house move this weekend I'm going to get them fixed if we can pinpoint the cause.

[ZissisT]

Helo,
just fyi this was happening to me as well in #446 issue, reason was that ngModel.$render was overriden by a directive and on focus/blur event it tried to restore original selection (which was null since taBind wasn't initialized correctly). I don't know if this is the same issue, just mentioning it. Removing the ngModel.$render() fixed that for me, no replacing with empty content since that.

Zissis

[SimeonC]

Alright, @stivni If you can confirm that this is now fixed with the latest pre-release I'm going to release 1.3.0 properly. The other issue I can't really fix until we come up with some way of reliably reproducing it.

[steftrenson]

@stivni @SimeonC I can confirm this solved the issue.

[SimeonC]

Awesome, thanks.