How to get the Active Element inside a form?

[Rednas83]

Tried

import { useActiveElement } from '@vueuse/core'

const activeElement = useActiveElement()

watch(activeElement, (el) => {
  console.log('focus changed to', el.id)
})

But it's returning something like input_232_3 instead of the name that corresponds to the form input.

Any idea?

[justin-schroeder]

That is probably the id attribute (which is autogenerated if you dont provide one)

[Rednas83]

Ok, I will add the id attribute for now.

Why is the name not used for autognerating the id when not provided?

Something like

[Rednas83]

Any thoughts? I would prefer not to add an id everywhere. Why not make the autogenerated id more readable?

[justin-schroeder]

im sure something like that could be done (using the node’s hierarchy as the id) which would certainly reduce duplicates — not eliminate them though. however even in those cases it would not be globally accessible since nodes are only put in the global registry if they are given an explicit id. This could also be done in user-land for your own project

[Rednas83]

For now my only requirement is to have a logical name of the focused element but I think there could be many more use cases for an id based on the name.

Something like

import { useActiveElement } from '@vueuse/core'

const activeElement = useActiveElement()

watch(activeElement, (el) => {
  console.log('focus changed to', el.id) // Returns form1.user.mail instead of input_232_3
})

Should it not be user responsibility to provide unique names? I have not tested with duplicated names but I guess there would be more serious issues then

I am not in a rush with this. Please upvote if you like to have an autogenerated id based on the name.