Fullpage.js: fullpage.js “tab” key bug

[lunaandyou]

Hello

I discovered a bug.
Please see my github.
https://github.com/lunaandyou/fullpage
https://lunaandyou.github.io/fullpage/index.html

The website contains a modal button
When you click input and press "tab" key,
It doesn't work.
So I used to ues tabIndex, but it also doesn't work.

It works when I delete #fullpage > .fp-section.active
.fp-section.active is a bug TT
so what I will do ? please help me

[alvarotrigo]

This is a duplicated issue of https://github.com/alvarotrigo/fullPage.js/issues/3144

However, how would you expect fullpage.js to act in this case?

1- first tab, should focus the focusable element in the header
2- when there are no more focusable elements in the header, it should focus the ones in the section/slide.

3- if we scroll to another section or slide horizontally to another slide, what's the behaviour you would expect? Should we still be able to focus the elements in the fixed header again?
Or should we go back to section 1 to be able to focus them again? (as it would happen in a normal scrolling website)

[alvarotrigo]

Closed as duplicate as the OP doesn't provide further valuable information here.

[alvarotrigo]

I've fixed this issue on the dev version of fullPage.js version 3.0.3

Please feel free to try it and provide any feedback on it! 👍

[KosKosovuch]

    Fixed bug with tab         

    let elementToFocus = [...document.querySelectorAll('a')];
    for ( let i = 0; i < elementToFocus.length; i++ ) {
      elementToFocus[i].setAttribute('tabIndex', -1)
    }

    elementToFocus = [...document.querySelectorAll('input')];
    for ( let i = 0; i < elementToFocus.length; i++ ) {
      elementToFocus[i].setAttribute('tabIndex', -1)
    }

    let formInputs = [...document.querySelectorAll('.popup__form input')];
    for ( let i = 0; i < formInputs.length; i++ ) {
      formInputs[i].setAttribute('tabIndex', (i + 1))
    }

    let currentTabIndex = 1;
    document.addEventListener('keydown', this.keyHandler = (e) => {
      if ( this.$store.state.popup ) {
        if ( e.keyCode !== 9 ) return;
        for ( let i = 0; i < formInputs.length; i++ ) {
          formInputs[i].blur()
        }
        formInputs[currentTabIndex].focus();
        currentTabIndex++;
        if ( currentTabIndex === formInputs.length - 3 ) {
          currentTabIndex = 0;
        }
      }
    });