Sustained concentration on NextJS

Question

Sustained concentration on NextJS

As I embark on my journey of building my very first NextJS site, I have encountered a strange anomaly.

Within my site's header, I have incorporated several <Link /> components that serve as links to different pages of my site. These links are adorned with simple focus styles created using the :focus selector in CSS.

Upon clicking on one of the links, the focus styles are correctly applied and the site smoothly transitions to the new URL. However, I have noticed that the focus styles persist even after the new page has finished loading.

Is there a method to eliminate the focus state during the transition to a new page?

I am hopeful that a knowledgeable individual can assist this fledgling NextJS developer. Thank you.

javascript css reactjs next.js

Answer 1

Answer №1

I was able to resolve the issue and wanted to share the solution for anyone facing a similar problem in the future.

The problem was that my header links were located in my custom _app.js file, which wasn't getting re-rendered and hence the focus state was persisting. To fix this, I moved my site boilerplate code out of _app.js and created a separate component for it, which then wraps around each page.

For example:

pages/_app.js

const App = ({ Component, pageProps }) => <Component {...pageProps} />;

export default App;

components/SiteLayout.js

import Head from "next/head";

const SiteLayout = ({ children }) => {
  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <meta name="mobile-web-app-capable" content="yes" />
      </Head>
      <header>
        <Link href="my-page">
          <a>My page</a>
        </Link>
      </header>
      <main role="main">
        {children}
      </main>
    </>
  );
};

export default SiteLayout;

pages/my-page.js

import SiteLayout from "components/SiteLayout";

const MyPage = () => (
  <SiteLayout>
    <h1>My Page</h1>
  </SiteLayout>
);

export default MyPage;

Answer 2

I was able to resolve the issue and wanted to share the solution for anyone facing a similar problem in the future.

The problem was that my header links were located in my custom _app.js file, which wasn't getting re-rendered and hence the focus state was persisting. To fix this, I moved my site boilerplate code out of _app.js and created a separate component for it, which then wraps around each page.

For example:

pages/_app.js

const App = ({ Component, pageProps }) => <Component {...pageProps} />;

export default App;

components/SiteLayout.js

import Head from "next/head";

const SiteLayout = ({ children }) => {
  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <meta name="mobile-web-app-capable" content="yes" />
      </Head>
      <header>
        <Link href="my-page">
          <a>My page</a>
        </Link>
      </header>
      <main role="main">
        {children}
      </main>
    </>
  );
};

export default SiteLayout;

pages/my-page.js

import SiteLayout from "components/SiteLayout";

const MyPage = () => (
  <SiteLayout>
    <h1>My Page</h1>
  </SiteLayout>
);

export default MyPage;

Answer 3

Answer №2

One way to make this function is by adding an invisible input element to the code. By setting the height and width of the input to 0, the element remains hidden from view. Then, when the URL changes, focus can be directed to this input element.

import { withRouter } from 'next/router';
import React, { createRef, Component } from 'react';

class MyComponent extends Component {

    componentDidUpdate(prevProps) {
        if (this.props.router != prevProps.router) {
            this.input_ref.focus();
        }
    }

    input_ref = createRef()

    render() {
        return (
            <>
                {/* ... */}

                <input ref={this.input_ref} style={{width: 0, height: 0}} />

                {/* ... */}
            </>
        )
    }
}

export default withRouter(MyComponent);

Answer 4

One way to make this function is by adding an invisible input element to the code. By setting the height and width of the input to 0, the element remains hidden from view. Then, when the URL changes, focus can be directed to this input element.

import { withRouter } from 'next/router';
import React, { createRef, Component } from 'react';

class MyComponent extends Component {

    componentDidUpdate(prevProps) {
        if (this.props.router != prevProps.router) {
            this.input_ref.focus();
        }
    }

    input_ref = createRef()

    render() {
        return (
            <>
                {/* ... */}

                <input ref={this.input_ref} style={{width: 0, height: 0}} />

                {/* ... */}
            </>
        )
    }
}

export default withRouter(MyComponent);

Sustained concentration on NextJS

Answer №1

Answer №2

Similar questions

I'm noticing that the top border for my span is smaller than the bottom one. What could

What steps should be taken to make mocha utilize the HTTP response?

Utilizing Three.js to employ raycasting from the camera in order to choose specific items

Enhancing JQuery UI Accordion with simple ICONS

Eliminate any duplicate items from the array containing objects

Connect individuals based on specific criteria within a nested array

Can you style a radio button input using only CSS without a label?

Resolving the issue with unique ids in Material UI Autocomplete

Guide to selecting multiple rows at once using ng-options in a list

Exploring the Enzyme library in React to trigger an onClick event with a specific parameter

Can you explain the process of variable allocation?

When CSS Display table is resized at media query breakpoints, it causes other cells to disappear

Retrieving input value in an Android WebView

Establish a connection to AWS by utilizing MQTT.js

Creating a formatted JSON string from the data retrieved using a GET request and embedding it into an HTML template to be sent as the

What sets `isomorphic-fetch` apart from `isomorphic-unfetch` in the world of npm packages?

Challenges encountered when attempting to send an array in res.json with the MERN stack

Tips on accessing close autoComplete/TextField title in AppBar

What is the best approach to dynamically retrieve an API route from a component within the page directory?

Error message displaying that the argument for the onChange state in a jhipster react form is not assignable as type '{ [x: number]: any; }'