Changing value of control does not re-render a component fully in storybookjs storybook

Explanation of the problem

The issue pertains to a discrepancy in the behavior of the modal window in a component, “MyComponent.” The width of the modal window is expected to change in size when the “dialogModalSize” control is set to ‘s.’ However, the actual behavior observed is that the width of the modal window remains unchanged. When changes are made to the “save-button” component and then to “Dialog Modal > Default” the changes do apply. The difference with the “size” control is that the “title” text control is not set in the ngOnInit lifecycle method.

Code Snippets: The following code snippets provide an overview of the structure of the “MyComponent” and its associated parameters. A Storybook setup is utilized to demonstrate the behavior of the component.

export default {
  title: 'Components/MyComponent',
  component: MyComponent,
  decorators: [...],
  argTypes: {
    size: { control: { type: 'select', options: ['xs', 's', 'm', 'l', 'xl'] } },
    title: { control: { type: 'text' }
  }
} as Meta;

const Template: Story<MyComponent> = (args) => ({
  template: `
    <my-component [title]="title" [size]="size">
    </my-component>
  `
});

The following code snippet represents the implementation of the “MyComponent.” The component has two inputs, “title” and “size,” which are utilized to configure the modal window’s width and height. The ngOnInit method sets the width of the modal window based on the value of “size.”

type Size = 'xs' | 's' | 'm' | 'l' | 'xl';

@Component({
  selector: `my-component`,
  templateUrl: './my.component.html,
})
export class MyComponent implements OnInit {
   // ... left out for brevity

  @Input()
  title: string;

  @Input()
  size: Size;

 ngOnInit(): void {
   const width = this.size ? this.sizes[this.size].width : this.sizes[this.breakpoint].width;
      this.config = Object.assign(
        new MatDialogConfig(),
        { width, minHeight: '320px' }
    );
  }
}

The system running the code consists of a macOS operating system version 10.15.7. The CPU is an Intel® Core™ i7-6700HQ CPU with a clock speed of 2.60GHz. The code is executed using Node version 12.18.3, Yarn version 1.22.4, and npm version 6.14.6. The browsers used for testing are Chrome version 87.0.4280.88, Firefox version 83.0, and Safari version 14.0. The Storybook setup utilizes the following npm packages: @storybook/addon-actions, @storybook/addon-essentials, @storybook/addon-links, and @storybook/angular.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for Changing value of control does not re-render a component fully in storybookjs storybook

The issue involves a component, “MyComponent”, in a StorybookJS storybook environment, that is not fully re-rendering when the value of a control is changed. The control, “dialogModalSize”, is a dropdown selection with the options [‘xs’, ‘s’, ‘m’, ‘l’, ‘xl’]. The desired behavior is for the modal window’s width size to change when a new selection is made in the dropdown.

However, when selecting ‘s’ in the dropdown and then clicking on the component’s button with the text ‘open modal’, the modal window does not change in width size. This behavior is unexpected and differs from other controls such as ‘dialogTitle’, which are working as expected. The difference between these controls is that the ‘title’ control is not set in the component’s ngOnInit lifecycle method.

The code snippets provided show the storybook definition, a template that uses the component, and the component’s implementation, including the ngOnInit method. The component uses inputs for the title and size properties and sets the width of the modal window in the ngOnInit method based on the size input value. The issue may be related to the component’s handling of input changes and the re-rendering of the component as a result.

Other popular problems with storybookjs storybook

A brief introduction to storybookjs storybook

Storybook is an open-source tool for developing and showcasing UI components in an isolated environment. It provides a way to build and test UI components outside of a real application, allowing developers to focus on individual components and their interactions.

Storybook integrates with various JavaScript frameworks such as React, Vue, and Angular, making it a versatile tool for building UI components. It has a number of features that make it an ideal choice for building UI components, including a flexible API, hot reloading, and an intuitive user interface. Additionally, Storybook provides the ability to add add-ons and plugins to extend its functionality, allowing developers to customize it to meet their specific needs.

Most popular use cases for storybookjs storybook

1. Component Development and Testing: Storybook provides a development environment for building, testing, and debugging UI components in isolation. With its intuitive UI, developers can easily create and manipulate components in real-time, which speeds up the development process.
2. Design System Documentation: Storybook can be used as a design system documentation tool, making it easier for designers and developers to work together. It provides a centralized repository for components, making it easier for developers to find and reuse components, and for designers to view and document design elements.

import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
};

export const Primary = () => <Button variant="primary">Primary</Button>;
export const Secondary = () => <Button variant="secondary">Secondary</Button>;