How to get the Cursor Position form q-input?

[wagner]

I need access to the current cursor position in the q-input field the following code returns cursorPos: undefined on the console.

This shows how to do it for a regular input field. Not sure why quasar is not exposing the input element.
https://stackoverflow.com/a/48149119/11314311

What is the correct way to do this?

<q-input v-model="input" ref="inputval" @input="changeInput" />

changeInput(value) {
   if (this.$refs.inputval) {
      this.cursorPosition = this.$refs.inputval.selectionStart;
      console.log('cursorPos:', this.cursorPosition)
  }
  this.cursorPosition = 0;
},

[metalsadman]

@wagner try this.$refs.inputval.$el.selectionStart notice the $el. or log your ref and see children elements, look for the input element, so you can select it using the children’s array.

[wagner]

Unfortunately, this.$refs.inputval.$el.selectionStart does not work either.

This is the S section under this.$refs.inputval.$el when I log it to the console.

prefix: null
previousElementSibling: p.instructmsg
previousSibling: p.instructmsg
scrollHeight: 76
scrollLeft: 0
scrollTop: 0
scrollWidth: 496
shadowRoot: null
slot: ""
spellcheck: true
style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
tabIndex: -1
tagName: "DIV"
textContent: ""
title: ""
translate: true

[metalsadman]

@wagner here https://codepen.io/metalsadman/pen/VwwVMaK?&editable=true&editors=101, basically you want to tap into the actual input element wrapped by QInput. logging the refs will give you hint, I got it that way in the browser console log.

[wagner]

This works. Thank you.