contenteditable="true" not functional in a sub component Angular

Question

I have a div with a contenteditable="true" property in a component.

subcomponent html:

<div class="text" contenteditable="true" >
</div>

. Main component html:

<html>
    <body>
        <app-subcomponent
            [someValue]="someValue">
        </app-subcomponent>
    </body>
</html>

It does result in the standard blue outline as expected but it is not editable. However if I would add the div with the contenteditable property inside the main component it works fine.

Why is this the case and how can I solve it? I can use the input and textarea elements (and they work) but I would prefer the div editable method because it would be a more elegant solution in this case.

It seems to work, so maybe you should provide a minimal reproducible example — user4676340
I know that I have done it before without issues so maybe it's indeed because my specific case, I will go ahead and isolate the section of the code while maintain the problem. — Rick Vink
Please give us a sandbox to verify that you indeed have this issue. — user4676340
I one by one commented all my code and found that the command: jQuery(".freeSelect").disableSelection(); Resulted in this behavior. Thanks for your time — Rick Vink

Rick Vink Rick Vink · Accepted Answer · 2018-04-17T12:50:50

The issues was outside of this part of the code: I had the jQuery(".freeSelect").disableSelection(); somewhere and it only acted on the subcommponent and not my main component

contenteditable="true" not functional in a sub component Angular

1 Answers