On screen keyboard not working for custom input field-CodePudding

I am trying to get an on screen keyboard to work with a custom input field however I get an error stating ERROR TypeError: Cannot read properties of undefined (reading 'substr'. On a normal input field this keyboard works perfectly.

App component HTML

<cb-form adobeFrmcontainer="registration-setupform" [formGroup]="setupForm">
  <form-input
    appOskInput
    [formStatus]="formStatus"
    [parentFormGroup]="setupForm"
    [data]="{
                        formControlName: 'accountNumber',
                        name: 'accountNumber'
                        icon: '',
                        maxlength: '16' |translate
                      }">
  </form-input>
</cb-form>

<app-keyboard></app-keyboard>

Keyboard directive

private el: ElementRef

ngOnInit() {
    let thisStyle = window.getComputedStyle(this.el.nativeElement);
    this.measure = document.createElement("span");
    this.measure.style.position = "absolute";
    this.measure.style.right = "100%";
    this.measure.style.font = thisStyle.font;
    document.body.appendChild(this.measure);
}

private onKey(key: string) {
        let element = this.el.nativeElement,
          start = element.selectionStart,
          end = element.selectionEnd;
        console.log("key element: " element);
        this.measure.textContent = element.value.substr(0, start)   key;
        element.value = element.value.substr(0, start)   key   element.value.substr(end);
        element.focus();
        element.selectionStart = element.selectionEnd = start   1;
    
        this.updateScrollPosition();
 }

The difference I See is that a normal input field returns [object HTMLInputElement] in my console.log("key element: " element); whereas the custom input field returns [object HTMLElement]

Any ideas please?

CodePudding user response：

Element you are referring is a html element instead of a input element. It is the reference of custom element <form-input>. You need get the input element from the htmlelement reference.

let inputEl = element.querySelector('input');
this.measure.textContent = inputEl.value.substr(0, start)   key;