contentEditable="true": Text appearing infront of input cursor

Question

I am using angular.

My code:

<div contentEditable="true" attr.placeholder="{{placeholder}}" 
    [textContent]="model"
    (input)="[model=$event.target.textContent,inputed($event)]">
</div>

I am trying to build a resposive website. The component above works well in the web version, even when I test it on the web for different sizes, using google chrome. The problem comes when I try to use the form in a mobile device, using safari browser. The Input cursor does not move, text appears in front of it. text appears backwards.

For example if I type Hello world. it appears as .dlrow olleH. The cursor stays at the far left.

If I remove model=$event.target.textContent it works as expected even on the mobile browsers. Is there a way to make it work normally without having to remove this piece of code?

Did you try with two-way binding `[(ngModel)]="model"` instead? — ConnorsFan, May 28 '20 at 18:16
@ConnorsFan I am using the component in a reactive form so ngModel won’t help. — YulePale, May 29 '20 at 03:29

score 0 · Accepted Answer · answered Jun 04 '20 at 04:33

I have found a solution to my problem.

Old problematic code:

HTML:

<div contentEditable="true" attr.placeholder="{{placeholder}}" 
    [textContent]="model"
    (input)="inputed($event)">
</div>

Typescript file:

@Input() model = '';

inputed(event){
    this.model = event.target.textContent;
    this.propagateChange(this.model.trim());
}

New code, the solution

HTML:

<div contenteditable="true" attr.placeholder="{{placeholder}}" 
    [textContent]="model"
    (input)="inputed($event)" >
</div>

Typescript file

@Input() model = '';

inputed(event){
    this.propagateChange(event.target.textContent);
  }

There is more code in the typescript file that allows for the component to be used as a form input in a reactive form. Below is the full code for the typescript file.

import { Component, OnInit, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'custom-textarea',
  templateUrl: './custom-textarea.component.html',
  styleUrls: ['./custom-textarea.component.scss'],
  providers: [
    { 
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => CustomTextareaComponent),
    }
  ]
})

export class CustomTextareaComponent implements ControlValueAccessor, OnInit {

  @Input() placeholder:string = "";

  propagateChange = (_: any) => {};

  writeValue(obj: any): void {
    if (obj !== undefined) {
      this.model = obj;
    }
  }
  registerOnChange(fn: any): void {
    this.propagateChange = fn;
  }
  registerOnTouched(fn: any): void {
    // We don’t want to do anything at this event,
    // so we can implement the interface with an empty function.
  }
  setDisabledState?(isDisabled: boolean): void {
    // We don’t want to do anything at this event,
    // so we can implement the interface with an empty function.
  }

  constructor() { }

  ngOnInit() { }

  @Input() model = '';

  inputed(event){
    this.propagateChange(event.target.textContent);
  }

}

contentEditable="true": Text appearing infront of input cursor

1 Answers1

Linked