Autofocus processing was blocked because a document already has a focused element - SelectMenu

[FADL285]

Description

When using the select menu and opening it, this message appears in the console.

Autofocus processing was blocked because a document already has a focused element.

[cn-2k]

Im having a similar problem and I dont know if this a Vue or HTML problem related, btw I maded a playground showing the behaviour:

https://play.vuejs.org/#eNp9UctuwjAQ/JWtL22llhx6a1PUh5DaHkpVOPpikk0wOLblByAh/r3rpAEOgJSDszO7Mzu7Za/WDlYR2SPLAzZWiYBDrgHyUq7aBz1nMQSj4aVQslg+c+bnJqpyMjfrsZ4Z4Uqpa3iGSiiPnA0/ZIlg9kiedf39NAure1mdGUPt07n0QJ84mgENei9qvMozu3flIOvfATdBOBTdL5ACDV+TxtVpkQOvMSUqIhZGB9ThAIkYTGWK6LtCJ5VnXSx5dhQW/frCSRvAY4gWlNA1TQyeluFaNta4AFtwWMEOKmcauKbEr7kmTR/gX5kCJMYNGWC3Tz12JulEDC5iIuZZJ05S7I5EqbGS9WDhjaajbpPrtF1jpUI3tkHSYM4eoUUSJpQy66+2lmbe9fVijsXyRH3hN6nG2Y9Dj25FJ99jdIQaKcQEjybfdJUjkKKOitgXwF/0RsXksaO9RV2S7SNe6/azzZSymPrRhsLz/VLJaGLuWj5nlPP7hdUPdh8GD20f1zu2+wP/Fgbs

When I use the autofocus on a textarea that will be visible only by a certain condition the console displays this message for me and not focus the textarea

[cn-2k]

Im having a similar problem and I dont know if this a Vue or HTML problem related, btw I maded a playground showing the behaviour:

https://play.vuejs.org/#eNp9UctuwjAQ/JWtL22llhx6a1PUh5DaHkpVOPpikk0wOLblByAh/r3rpAEOgJSDszO7Mzu7Za/WDlYR2SPLAzZWiYBDrgHyUq7aBz1nMQSj4aVQslg+c+bnJqpyMjfrsZ4Z4Uqpa3iGSiiPnA0/ZIlg9kiedf39NAure1mdGUPt07n0QJ84mgENei9qvMozu3flIOvfATdBOBTdL5ACDV+TxtVpkQOvMSUqIhZGB9ThAIkYTGWK6LtCJ5VnXSx5dhQW/frCSRvAY4gWlNA1TQyeluFaNta4AFtwWMEOKmcauKbEr7kmTR/gX5kCJMYNGWC3Tz12JulEDC5iIuZZJ05S7I5EqbGS9WDhjaajbpPrtF1jpUI3tkHSYM4eoUUSJpQy66+2lmbe9fVijsXyRH3hN6nG2Y9Dj25FJ99jdIQaKcQEjybfdJUjkKKOitgXwF/0RsXksaO9RV2S7SNe6/azzZSymPrRhsLz/VLJaGLuWj5nlPP7hdUPdh8GD20f1zu2+wP/Fgbs

When I use the autofocus on a textarea that will be visible only by a certain condition the console displays this message for me and not focus the textarea

[EDIT]

I solve this using a custom directive (v-focus):

<template>
  <div>
    <button @click="shouldShowOnboarding = false">Hide onboarding</button>
    <p v-if="shouldShowOnboarding">This is a onboarding message!</p>
    <br />
    <textarea
      v-if="!shouldShowOnboarding"
      v-model="content"
      v-focus
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const content = ref("");
const shouldShowOnboarding = ref(true);

const vFocus = {
  mounted: (el: HTMLElement) => el.focus(),
};
</script>

[moshetanzer]

Hi @FADL285,

Did you manage to solve this?