Addon-knobs not working unless applied directly in story props

Describe the bug Hard to describe, but the knobs are not working unless the options are directly defined in the props of the story. I normally define a props variable I can share between stories for common data. If I put any knob options in this props variable it will not display in the knobs tab in Storybook. Occasionally if I refresh the page I can see both select knobs, but if I change the width one it will just disappear completely. The widthThatWorks has no issue and does update in Storybook properly.

To Reproduce Run the story file code below.

Expected behavior The code below should display two select knob options. Occasionally displays both, but only one ever works.

Screenshots Here’s how it looks when they both finally display.

What it looks like if you make a change to width.

Code snippets

import { select, withKnobs } from '@storybook/addon-knobs';
import { moduleMetadata, storiesOf } from '@storybook/angular';

const props = {
  width: select('width', ['full', 'auto', 200, 320, 400, 600], 320)
};

storiesOf('Knob Test', module)
  .addDecorator(
    moduleMetadata({
      imports: []
    })
  )
  .addDecorator(withKnobs)
  .add('Basic', () => ({
    template: `
      width: {{ width }}<br>
      widthThatWorks: {{ widthThatWorks }}
    `,
    props: {
      ...props,
      widthThatWorks: select('widthThatWorks', ['full', 'auto', 200, 320, 400, 600], 320)
    }
  }));

System:

• OS: Linux Ubuntu 18.04
• Device: [e.g. iPhoneX, Macbook Pro 2018]
• Browser: Chromium 75, Firefox 67
• Framework: Angular
• Addons: Knobs
• Version: 5.1.8

[shilman]

@matthewmorek Updated the title.

TBH, knobs is legacy code at this point and in need of a major cleanup. We’re hoping to rearchitect it for 6.0 to address these issues and more.

[ralph-dev]

@nunoleong

import React from "react";
import { storiesOf } from "@storybook/react-native";
import { CardColorSquare, ICardColorSquare } from "./index";
import { select, text } from "@storybook/addon-knobs";

type TCardColorSquareArgs = (
  color?: string,
  groupID?: string,
) => ICardColorSquare;

export const CardColorSquareArgs: TCardColorSquareArgs = (
  color = 'pink',
  groupID= 'CardColorSquareArgs'
) => {
  return {
    color: select('color',['blue','red'], 'red', groupID),
  }
}

storiesOf("CardColorSquare", module).add("Basic", () => (
  <CardColorSquare {...CardColorSquareArgs()} />
  ));

Works fine for me!