Remove focus from v-rating without loosing keyboard interactivity

[frederikheld]

Hello everyone,

I'm using v-rating as first element in a dialog and naturally it gets focus on load. Unfortunately the focus adds an outline, which is nice for keyboard interaction but looks odd and is confusing if the user did not interact with it using the keyboard yet.

So I tried to remove the focus using:

onMounted((document.activeElement as HTMLElement).blur())

This works, it removes the focus an with it the outline, but it works a bit too good: if I interact with the component through the keyboard now, I can tab through the stars (which will make them outlined as expected), but hitting space to select a rating does not work anymore. It works without my focus removal code though.

Is this a bug, or is there a better way to do this?

Thanks in advance,
Frederik

[frederikheld]

My current workaround is to add a hidden input as first input to the dialog. It will silently catch the focus on load.

<v-text-field v-show="false" />