[Bug]: Boolean control in true state in URL is ignored

[JReinhold]

Discussed in #25034

^{Originally posted by khats November 29, 2023}

Summary

When a boolean control is true it is correctly written to the URL, however when reloading the browser the query parameter is ignored and the boolean is converted back to false again. The same happens when you attempt to open the preview iframe.

Reproduction

1. Open this story for the boolean control, starting in an undefined state: https://next--635781f3500dd2c49e189caf.chromatic.com/?path=/story/blocks-controls-boolean--undefined
2. Set the boolean to false and reload. See that it correctly stays false.
3. Set the boolean to true and reload. See that it is now false again.

[markallancourtney]

I can confirm this bug exists.

Query string parameters seem to be negating boolean values by using !true and !false

&args=control-name:!false

[cellog]

This breaks any boolean or date control if you load the story in a separate tab using

We have a decorator that responds to updates in args to force a reload in order to ensure values get reflected. This breaks in the latest storybook, which makes it very impossible to use storybook for development of features that use the args represented by the boolean control

[cellog]

there is a workaround we can use which is kind of silly but it works:

        {
          options: ["true", "false"],
          mapping: { true: true, false: false },
          description: "arg description",
          control: {
            type: "select",
            labels: { true: "Enabled", false: "Disabled" },
          },
        },

You just have to change the default value for the arg from true to "true" and false to "false"

[vanessayuenn]

same issue as #23623