Element within scrollTrigger loses focus on ScrollTrigger.refresh()

[BennyBee]

I'm trying to add keyboard navigation controls to an accordion component.

 

I have an element that is pinned with ScrollTrigger. Inside that element is a button which changes parts of the layout when clicked.

When I trigger a ScrollTrigger.refresh(); the button loses focus - is there a reason for this?

 

You can see it in the codepen (click in input, then use tab to focus button, then press enter to 'click' it)

 

My only solution is to manually focus the button after the refresh - but then this would show it as focussed for the non-keyboard users which isn't ideal.

 

Thanks!

See the Pen mdpeENE by bennyb (@bennyb) on CodePen

[OSUblake]

Welcome to the forums @BennyBee

 

I don't think that's possible when you have something pinned as refresh changes the pin spacer which is making it lose focus.