Unable to Scroll Vertically or Horizontally via Keyboard in Next.js

[MichaelJohnson144]

Description

I'm experiencing an issue with fullPage's "keyboardScrolling" horizontally/vertically between sections in Next.js where sections and slides wouldn't change after pressing a navigation key on my keyboard. I'd done some digging here and around the web to try and find a solution to this particular problem, tho to no avail; is there an existing solution to this that I'm ignorant to?

Link to isolated reproduction with no external CSS / JS

Not available at this moment in time.

Steps to reproduce it

1. Upon attempts to navigate the sections up/down/right/left via the keyboard nothing happens.

Versions

[Chrome, Windows 10]

[alvarotrigo]

I'm unable to reproduce the issue on this codesandbox.

Can you please provide an isolated reproduction in Codesandbox with no CSS or JS files external to fullPage.js and the minimum amount of HTML code? Use empty sections unless strictly necessary for the reproduction.

[MichaelJohnson144]

I'm unable to reproduce the issue on this codesandbox.

Can you please provide an isolated reproduction in Codesandbox with no CSS or JS files external to fullPage.js and the minimum amount of HTML code? Use empty sections unless strictly necessary for the reproduction.

Hi, Alvaro. I'd tried reproducing the issue on Codesandbox but was unfortunately unable to since I'm not a patron there; however, a similar problem--tho considered fixed and thus closed--can be seen and reproduced from "gustavlrsn's" original's here.

You'll notice that nothing happens upon attempting to navigate to another section via the keyboard. This issue, however, doesn't exist in my React version

[alvarotrigo]

I'd tried reproducing the issue on Codesandbox but was unfortunately unable to since I'm not a patron there;

You don't need to be a patreon. Just fork it and save your new sandbox.

I'm not able to reproduce the issue in the Next.js example that comes with react-fullpage.

can be seen and reproduced from "gustavlrsn's" original's here.

The author said he can no longer reproduce the issue in his machine. Codesandbox uses an iFrame that might be messing up with fullPage.js keyboard events. So unless you are able to provide a reproduction somewhere I don't see how I can be of any help.

[MichaelJohnson144]

Hi, Alvaro! I'd seen the cause of the issue; it was due to developing in dev mode in Next.js; this issue goes away in prod mode.

[alvarotrigo]

I'm glad you figured it out ;)

[SKYnSPACE]

Disabling Strict Mode by setting next.config.(m)js solved the issue in my case.

module.exports = {
  reactStrictMode: false,
}

[alvarotrigo]

Disabling Strict Mode by setting next.config.(m)js solved the issue in my case.

Interesting... thanks for the tip! 👍