[Bug]: Disabled checkbox is clickable in interaction tests

[lebedev]

Describe the bug

I use storybook@8, react and vite. I noticed that a disabled checkbox wrapped in label triggers onChange handler in storybook interaction tests, however I expect it not to. The minimal setup with a reproducible failed test is

import type { StoryObj } from '@storybook/react';

import { userEvent, within, expect, fn } from '@storybook/test';

const meta = {
  title: 'Example/Checkbox',
  parameters: {
    layout: 'centered',
  },
  args: { onChange: fn(() => console.log('changed!')) },
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  render: (args) => (
    <label data-testid="checkbox-label">
      <input type="checkbox" disabled {...args} />
    </label>
  ),
  play: async ({ args, canvasElement }) => {
    const checkbox = within(canvasElement).getByTestId('checkbox-label');

    await userEvent.click(checkbox);

    expect(args.onChange).not.toBeCalled();
  },
};

If I manually click on the checkbox, it doesn't trigger onChange handler as expected.
If I recreate the same setup in vitest, then it behaves as expected as well.

Reproduction link

https://stackblitz.com/edit/github-6tqsvjkd-c8xb1vxt?file=src%2Fstories%2FCheckbox.stories.tsx

Reproduction steps

1. Run reproduction link.
2. Open Checkbox -> Primary story, then Interaction tab with a failed test.

System

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8 => 8.6.4 
    @storybook/addon-interactions: ^8 => 8.6.4 
    @storybook/react: ^8 => 8.6.4 
    @storybook/react-vite: ^8 => 8.6.4 
    @storybook/test: ^8 => 8.6.4 
    storybook: ^8 => 8.6.4

Additional context

I think that it's userEvent behaves not like a user doing events in storybook environment.

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This appears to be an issue with how userEvent handles disabled elements in Storybook's test environment. The fix would be to modify the click behavior in @storybook/test's userEvent implementation to respect the disabled attribute. Specific steps: 1. Check @storybook/test-runner/src/user-event for the click event handling 2. Add a check before triggering click events: js const isDisabled = element.hasAttribute('disabled') || element.closest('label')?.querySelector('[disabled]'); if (isDisabled) { return; } 3. This should be added before the click event is dispatched to prevent interaction with disabled elements

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile