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