In Aurelia how to get co-ordinate of cursor inside textarea based on keypress event?

Question

I have added a key press delegate event but not getting the co-ordinate on event.

I need the co-ordinate to show a list of auto-suggest at the cursor position by changing it's css of top and left property.

<div class="dropdown suggest  open" data-key="." css="display: ${autoSuggestTool.display}">
                                    <ul class="dropdown-menu" role="menu" css="top:${autoSuggestTool.top}; left: ${autoSuggestTool.left};">
                                        <li data-value="Test" class="active "><a href="#"><small>Test</small></a></li>                                                         </ul>
                                </div>
<textarea class="form-control" rows="5" cols="6" id="comment" value.bind="textAreaValue" keypress.delegate="autoSuggest($event)" placeholder="Type text "></textarea>

//Code in .ts file :

autosuggest(event){
        //here i need the pageX and PageY or offset to set the postion
        //this.autoSuggestTool.left = event.pageX;
        //this.autoSuggestTool.top= event.pageY;
        //**But in event i am not getting the co-ordinate of cursor inside textarea**
        //How to get the co-ordinate of cursor on key press in aurelia.
        }

Answer 1

was able to get finally the pixel location of the cursor inside text area using the cursor position and counting the characters and identifying the line number

     //Show and hide autoSuggestTool
     private showOverLayDiv(event) {
         this.index = 0;
         //get the cursor position inside the textarea
         this.getCursorPosition(event);
         //get the line number
         this.getLineNumber(event);
         //set the css left of the div
         this.autoSuggestTool.left = event.target.offsetLeft + (this.textAreaCursorPosition * 5) + "px";
         //set the css top of the div
         this.autoSuggestTool.top = (this.textAreaLineNumber * 24) + "px";
         this.autoSuggestTool.display = "block";


     }
     private getLineNumber(event)
     {
         this.textAreaLineNumber = event.target.value.substr(0, event.target.selectionStart).split("\n").length;

     }
     public getCursorPosition(event)
     {
         let pos = event.target.selectionStart;
         //set the text area cursor position 
         this.textAreaCursorPosition = pos - this.prevLine(event.target);


     }
     // get the location based on the characters in text area
     public prevLine(target)
     {
         let lineArr = target.value.substr(0, target.selectionStart).split("\n");

         let numChars = 0;

         for (var i = 0; i < lineArr.length - 1; i++) {
             numChars += lineArr[i].length + 1;
         }

         return numChars;
     }

//However the code above on scroll down if more content is added inside the text area then the autosuggest List div is shown at the bottom since I have used Number of lines here which increase and the textarea gets scroll. As a result the textarea remains there only with now getting scroll but the Autosuggest div is shown at bottom as per number of lines. This is only the draw back of this technique.

Answer 2

Since what you are delegating to is keypress, what you are exposed to is an event of type KeyboardEvent, hence there's no coordinate info in it.

however delegating to click, mousedown etc (type MouseEvent), you should be able to see pageX, clientX etc.