Set focus on button not working

my template (I have another topic on v-for not allowing for constructed onclick and other attributes constructed dynamically, Ion-button color attribute from variable)

<template>
  <ion-page>
    <ion-content :fullscreen="true"  >    
     <div id="container" v-if="type === a">
          <ion-row class="typea" >
          <ion-button
            color="a1"
            ref="first_button_1" 
            @click="setTarget( type,  labels[0]  )" alt="type 1">
            {{labels[0]}}                               
          </ion-button>
          <ion-button
            color="a2"
            @click="setTarget( type,  labels[1]  )" alt="type 2">
            {{labels[1]}}
          </ion-button>
          </ion-row>
          <ion-row class="typea">
          <ion-button
            color="a3"
            @click="setTarget( type, labels[2]  )" alt="type 3">
            {{labels[2]}}
          </ion-button>
          <ion-button
            color="a4"
            @click="setTarget( type, labels[3]  )" alt="type 4">
            {{labels[3]}}
          </ion-button>
          </ion-row>
           <ion-button class="backbutton backbutton_a" @click="back" color="tertiary" >return to configuration</ion-button>
        </div>
        <div id="container" v-else>
          <ion-row class="typeb" > 
            <ion-button
              color="a1"
              ref="first_button_2"
              @click="setTarget( type, labels[0]  )" alt="type1">
              {{labels[0]}}
            </ion-button>
          </ion-row>
          <ion-row class="typeb">
            <ion-button
              color="a2"
              @click="setTarget( type, labels[1]  )" alt="type2">
              {{labels[1]}}
            </ion-button>
          </ion-row>
          <ion-row class="typeb">
            <ion-button
              color="a4"
              @click="setTarget( type, labels[2]  )" alt="type4">
              {{labels[2]}}
            </ion-button>
          </ion-row>
           <ion-button class="backbutton backbutton_b" color="tertiary" @click="back" >return to configuration</ion-button>
    </ion-content>
  </ion-page>
</template>

when this page is shown, if type=‘a’, then ALWAYS the button color=“a3” is selected. if type b, then ALWAYS the back button is selected, and when accessibility is enabled, the button alt text is spoken in either case

i have tried all the things others have tried, $nextTick(), setTimeout
notice I am doing this in didEnter()… which SHOULD be after everything is completed according to the lifecycle doc
ref lifecycle ref

ionViewDidEnter - If you see performance problems from using ionViewWillEnter when loading data, you can do your data calls in ionViewDidEnter instead. *However, this event will not fire until after the page is visible to the user*, 

ionViewDidEnter(){
 console.log(" sending focus change, refs="+JSON.stringify(Object.keys(this.$refs),null,2)); 
 const dest= ('first_button_'+this.prop[0])    
        console.log("dest="+dest)
        this.$refs[dest].$el.focus();
}

prop is ‘1’ or ‘2’
the console shows(here for type 2)

  [log] -  sending focus change, refs=[
  "first_button_2"]
⚡️  [log] - dest=first_button_2

trying to set the focus to the top or top/left button (this for blind user, stats show 1st button would be picked 75% of the time, so save them having to hunt for it. )

so, what am I missing?
ionic v = 6.16.3

1 post - 1 participant

Read full topic