Only first element is focused inside the dialog #3263
Description
After opening the dialog, first element is focused with the tooltip as shown in the image.
On clicking the Next on the tooltip, it moves to the next element. Now the element is not focused. Only tooltip is shown.
It only focus on the first element. On clciking the Next button, tooltip is shown. but input is not focused
This is my code
localUserTour.addStep ( {
id : 'local-username',
text : 'Enter local username',
attachTo : {
element : null,
on : 'bottom'
},
buttons : [
{
text : 'Skip',
action : () => localUserTour.cancel (), // exit the tour
classes : 'shepherd-button-skip'
},
{
text : 'Next',
action : () => localUserTour.next ()
}
],
beforeShowPromise : () => {
return new Promise ( ( resolve ) => {
const checkEl = setInterval ( () => {
const input = document.querySelector ( 'input[data-cy="local-username"]' );
console.log ( "input checkbox", input );
if ( input ) {
console.log ( "Inside input upper lower case" );
clearInterval ( checkEl );
const step = localUserTour.getCurrentStep ();
setTimeout ( () => {
step.updateStepOptions ( {
attachTo : { element : input, on : 'bottom' }
} );
resolve ();
}, 300 );
}
}, 100 );
} );
}
} );
localUserTour.addStep ( {
id : 'login',
text : 'Enter local user login',
attachTo : {
element : null,
on : 'bottom'
},
buttons : [
{
text : 'Skip',
action : () => localUserTour.cancel (), // exit the tour
classes : 'shepherd-button-skip'
},
{
text : 'Next',
action : () => localUserTour.next ()
}
],
beforeShowPromise : () => {
return new Promise ( ( resolve ) => {
const checkEl = setInterval ( () => {
const input = document.querySelector ( 'input[data-cy="login"]' );
console.log ( "input checkbox", input );
if ( input ) {
console.log ( "Inside input upper lower case" );
clearInterval ( checkEl );
const step = localUserTour.getCurrentStep ();
setTimeout ( () => {
step.updateStepOptions ( {
attachTo : { element : input, on : 'bottom' }
} );
resolve ();
}, 100 );
}
}, 100 );
} );
}
} );