Storybook: Addon-docs: DocsPage Controls don't update iframe stories

[shilman]

Controls don't update iframed stories on the Docs tab, but do update on the Canvas tab.

For frameworks that support inline rendering (react, vue, web-components, etc.), making the docs stories render inline is a workaround.

[michaelbayday]

i was experiencing something similar to this with react

[petermikitsh]

I've been observing controls not updating the render on the canvas tab, with react

[shilman]

@michaelbayday @petermikitsh do either of you have a repro you can share? haven't seen that yet.

[blowsie]

@shilman

reproduced in vue, here
https://github.com/storybookjs/storybook/issues/11990

[blowsie]

Reproduction is now showing the controls and showing the issue
https://github.com/blowsie/storybook-vue

[shilman]

The problem is the story:

https://github.com/blowsie/storybook-vue/blob/master/src/TestComponent.stories.js#L11

Try:

const Template = (args, { argTypes }) => ({

[blowsie]

Fixed my issue, thanks!

[petermikitsh]

@shilman No repro; my observation was a hiccup on my upgrade from 5 to 6. My apologies!

[flobiber]

So for me i also have this issue with angular -> here is an example repo:
https://github.com/flobiber/storybook-angular

[manuelmeister]

Can be observed here as well: https://storybookjs.netlify.app/angular-cli/?path=/docs/docbutton--basic

[jamesjenkinsjr]

Scouring around, this workaround got my Docs page re-rendering with changes to controls (for React implementations, but perhaps could also work for Vue?):

import { parameters } from "@storybook/addon-docs/dist/frameworks/react/config";
import { addParameters } from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';

addParameters({
  docs: {
    ...parameters.docs,
    container: DocsContainer,
    page: DocsPage,
  },
  controls: {
    expanded: true,
  }
});

Note the import and spread of parameters.docs

[shilman]

@jamesjenkinsjr if you needed to do this it's due to a configuration problem and not related to the iframe issue here. I just want to clarify for anybody who stumbles across this to avoid confusion.