Hover behavior persists until component is remounted.

[ninjarogue]

Describe the bug
The hover behavior is still shown (while viewing the stories at issue on the canvas) even after switching between stories for a single React (v18.0.2) component. The issue resolves itself once the component is remounted.

To Reproduce
If you alternate between the two stories (Default and Hovered) to view their canvases, you'll see that the hover behavior persists until the components are remounted. And if you remount the component with the pseudo hover state enabled, the hover behavior disappears.

Stories:

// HeaderNavigation.stories.tsx

import {
  ComponentMeta,
  ComponentStory
} from '@storybook/react';
import { HeaderNavigation } from 'modules';
import { withRouter } from 'storybook-addon-react-router-v6';



export default {
  title: 'modules/layer00/HeaderNavigation',
  component: HeaderNavigation.FC,
  decorators: [withRouter],
  parameters: {
    layout: 'fullscreen',
    reactRouter: {
      routePath: '/'
    },
  },
} as ComponentMeta<typeof HeaderNavigation.FC>;

const Template: ComponentStory<typeof HeaderNavigation.FC> = () => <HeaderNavigation.FC />;

export const Default = Template.bind({});

export const Hovered = Template.bind({});
Hovered.parameters = {
  pseudo: {
    hover: "#linkAboutUs"
  }
}

HeaderNavigation implementation:

// HeaderNavigation.tsx

import {
  FC as ReactFC,
  startTransition,
  useCallback
} from 'react';

import { useNavigate } from 'react-router-dom';

import styles from './HeaderNavigation.module.css';
import { topBarLogo } from 'assets/images/svg';



export const FC: ReactFC = () => {
  const navigate = useNavigate();



  const goTo = useCallback((path: string) => {
    startTransition(() => {
      navigate(path);
    });
  }, [navigate]);



  return (
    <header className={styles.header}>

      <div className={styles.headerItems}>

        <img className={styles.itemsLogo} src={topBarLogo} alt="" />

        <nav className={styles.itemsNavlinks}>
          <div onClick={() => goTo('/services')}>
            Services
          </div>

          <div
            id="linkAboutUs"
            onClick={() => goTo('/aboutus')}>
            About Us
          </div>

          <div onClick={() => goTo('/')}>
            Industries
          </div>

          <div onClick={() => goTo('/')}>
            Work
          </div>

          <div onClick={() => goTo('/')}>
            Contact us
          </div>
        </nav>

        <button className={styles.itemsButton}>
          START A PROJECT
        </button>

      </div>

    </header>
  );
};

System

Environment Info:

  System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.13.2 - /usr/local/bin/node
    npm: 8.13.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Safari: 15.5
  npmPackages:
    @storybook/addon-actions: ^6.5.9 => 6.5.9
    @storybook/addon-essentials: ^6.5.9 => 6.5.9
    @storybook/addon-interactions: ^6.5.9 => 6.5.9
    @storybook/addon-links: ^6.5.9 => 6.5.9
    @storybook/builder-webpack5: ^6.5.9 => 6.5.9
    @storybook/jest: ^0.0.10 => 0.0.10
    @storybook/manager-webpack5: ^6.5.9 => 6.5.9
    @storybook/node-logger: ^6.5.9 => 6.5.9
    @storybook/preset-create-react-app: ^4.1.2 => 4.1.2
    @storybook/react: ^6.5.9 => 6.5.9
    @storybook/testing-library: ^0.0.13 => 0.0.13
    ```

[amit13091992]

@ninjarogue I have tried same on button but it didn't even do the hover feature at all. any help would be really helpful.

Thanks in advance.

[ninjarogue]

@amit13091992 how can I help?

[naama-melio]

+1

[drewbrend]

@ninjarogue Did you find any workarounds for this? I'm encountering the same issue.

[ninjarogue]

@drewbrend Sorry I never found a workaround.. I'm no longer working on the same project.

[Renaud009]

Looking for a workaround as well