Storybook: Knob disappears when its value is changed (knob added as global decorator)

[toxicgorilla]

Issue details

Please see attached gif below.

I have created a global decorator - IntlProviderDecorator - which should add a select knob to all stories, wrapping each story in a react-intl to allow use of e.g. FormattedDate in the components.
When first loading a story, the knob is present. However, when you change its value (or that of any other knob), it disappears.

Steps to reproduce

1) Create a new react app using create-react-app
2) Add react-intl
3) add storybook and storybook/addon-knobs
4) Create file src/IntlProvider as follows:

```import React from 'react';
import { IntlProvider, addLocaleData } from 'react-intl';
import { select } from '@storybook/addon-knobs';

import en from 'react-intl/locale-data/en';
import fr from 'react-intl/locale-data/fr';
import es from 'react-intl/locale-data/es';
import ja from 'react-intl/locale-data/ja';
import de from 'react-intl/locale-data/de';

addLocaleData([...en, ...fr, ...es, ...ja, ...de]);

const options = {
en: 'en',
fr: 'fr',
ja: 'ja',
es: 'es',
de: 'de',
};
const locale = select('locale', options, 'en');

const IntlProviderDecorator = storyFn => ;

export default IntlProviderDecorator;

5) In storybook's config.js, add IntlProviderDecroator as global decorator:

import { configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import IntlProviderDecorator from '../src/IntlProviderDecorator';

const req = require.context('../src/components', true, /.stories.jsx$/);
addDecorator(IntlProviderDecorator);
addDecorator(withKnobs);

function loadStories() {
req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);
```

6) Create a component and a story for it
7) Run storybook

When the story first loads, a 'locale' knob is present, with the 5 options (en, fr, es, js, de). But as soon as you change the value of the knob, or the value of any other knob, the locale knob disappears.

If you comment/uncomment out the addDecorator(IntlProviderDecorator); line in config.js and save the file, the knob reappears, only for the same disappearing act to happen again.

Please specify which version of Storybook and optionally any affected addons that you're running

storybook/cli 3.4.0-alpha.1

storybook/addon-actions: ^3.4.0-alpha.1
storybook/addon-knobs: ^3.4.0-alpha.1
storybook/addon-links: ^3.4.0-alpha.1
storybook/react: ^3.4.0-alpha.1

I have just upgraded all the above storybook packages, but the same issue exists in v3.2.17

Affected platforms

Windows 10
Chrome 63.0.3239.108
node v9.3.0
npm v5.3.0

Screenshots / Screencast / Code Snippets (Optional)

screencast:

[toxicgorilla]

Sorry, figured it out. The answer in case anyone else needs it:

IntlProviderDecorator.jsx

const IntlProviderDecorator = (storyFn, context) => {
  const supportedLocales = {
    'en-GB': 'en-GB',
    'en-US': 'en-US',
    fr: 'fr',
    ja: 'ja',
    es: 'es',
    de: 'de',
  };
  const locale = select('Locale', supportedLocales, 'en-GB');
  const story = storyFn();
  return <IntlProvider locale={locale}>{story}</IntlProvider>;
};

export default IntlProviderDecorator;

.storybook/config.js

addDecorator(IntlProviderDecorator);
addDecorator(withKnobs);

[kohlmannj]

@toxicgorilla Thanks for this! I had a global decorator with knobs added _after_ addDecorator(withKnobs) and was seeing the knobs disappear immediately upon switching stories. Reordering the addDecorator() calls in .storybook/config.js resolved this.

[hoodwink73]

Worked for me as well.