Skip to content

[Bug]: "Maximum call stack size exceeded" error when using Cally date picker #32603

@rdebeasi

Description

@rdebeasi

Describe the bug

When the Cally date picker is used in Storybook, a "maximum call stack size" error occurs. This error does not occur outside of Storybook.

VM1030 cally.js:19 Uncaught RangeError: Maximum call stack size exceeded

Reproduction link

https://github.com/rdebeasi/cally-repro

Reproduction steps

  1. Check out the repro and run npm i.
  2. Run npm run storybok. This command runs React + Vite + Storybook.
  3. In a browser, open http://localhost:6006/iframe.html?globals=&id=example-datepicker--basic&viewMode=story
  4. Open browser dev tools and open the console tab.
  5. Click a date.
  6. Note that the follwoing error appears in console: "VM1030 cally.js:19 Uncaught RangeError: Maximum call stack size exceeded".
  7. Press an arrow key.
  8. Note that the highlighted date does not move.

This repro uses Storybook React, but I've also seen the issue when using Storybook Angular.

Viewing expected behavior

  1. Run npm run dev. This command runs a React + Vite app.
  2. Open the local dev site in a browser.
  3. Open browser dev tools and open the console tab.
  4. Click a date.
  5. Note that no errors appear in console.
  6. Press an arrow key.
  7. Note that the highlighted date moves in the direction of the arrow key that was pressed.

System

Storybook Environment Info:

  System:
    OS: macOS 15.6.1
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.18.0 - ~/.local/state/fnm_multishells/48691_1759251509769/bin/node
    npm: 10.9.3 - ~/.local/state/fnm_multishells/48691_1759251509769/bin/npm <----- active
  Browsers:
    Chrome: 140.0.7339.214
    Edge: 140.0.3485.94
    Safari: 18.6
  npmPackages:
    @storybook/react-vite: ^9.1.8 => 9.1.8 
    eslint-plugin-storybook: ^9.1.8 => 9.1.8 
    storybook: ^9.1.8 => 9.1.8

Additional context

The "maximum call stack size" error appears when Cally attempts to focus to focus the button for currently selected date. This logic runs when the month is focused.

If focus events bubbled, then I could see why this error would occur. The button's focus event would bubble up to the month, which would trigger another button focus, which would trigger another month focus, which would trigger another button focus, etc.

My understanding is that focus events don't bubble, so I'm confused as to why this loop would occur. Is it possible that something in Storybook is causing focus events to bubble?

Thank you!!

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions