storybook: Controls with control: text unexpectedly translate ISO 8601 formatted datetime

Imagine any text input element as a story Template described by:

<Meta
  title="TextInput"
  argTypes={{
    value: {
      control: 'text',
    },
  }}
  args={{
    value: '',
  }}
/>
<Story
    name="Datetime in ISO format"
    args={{
      value: '2021-01-21T20:02:26Z',
    }}
>
  {Template.bind({})}
</Story>

Instead of displaying a provided value of 2021-01-21T20:02:26Z, the controls suddenly jump to conclusions and decide to do some black-box magic, translating this to Thu Jan 21 2021 21:02:26 GMT+0100 (Central European Standard Time).

I’m sure this should be an opt-in feature rather than taking away our ability to visually test & document any time-related inputs. I couldn’t find any workaround, considering that the string input doesn’t provide any other alternative to the ‘text’.

(Btw. my specific use-case also requires updating the control by modifying displayed value when a custom input emits any change, but it seems that updating control from inside the story isn’t supported by this framework either.)

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 5
Comments: 15 (5 by maintainers)

Most upvoted comments

@BikashSah999 a fix in our codebase would break for users who DO want those dates to be converted to date Classes.

Yeah, this seems like a good candidate for why you’d want to change the channelOptions in your main.js. I get it’s not optimal for you, but I don’t really see another way. There are no true date values in JSON, it must be a string. So SOME sort of string is going to be converted back into a Date class instance… I’m open to novel ideas, of course!

ndelangen on Dec 14, 2022

control: 'date',

Holy Shit!!! Why isn’t this control documented anywhere!!! Do you realize how long I tried to look for this control!!!

MrGrigri on Aug 27, 2021

Hi @yannbf, thanks, but my specific use-case is actually about working with the ISO value as a text, so the date control would just make it even more ambiguous about which value is really being passed (making it more difficult to manually test correct inputs).

scscgit on Jan 23, 2021

😦 also happen with objects… why? CleanShot 2022-07-28 at 15 54 37

nathanredblur on Jul 28, 2022

I too need a text for that field and this time when I put in an ISO string of 2021-01-22T15:37:26.021Z, this is what I get

While the date control (and even object) is a workaround, the component and the data in the backend is for an ISO string. And changing the date causes a millisecond timestamp to be sent rather than an ISO string so conversions need to be made prior to the component being called. Would be a lot more straightforward for our cases if a text was just rendered as a text like how object’s are currently handled.

adityasrini on Nov 18, 2021

@BikashSah999 you can indeed override the channelOptions in main.js:

https://github.com/storybookjs/storybook/blob/4f511dfd33ccd463dd69b3cc76206b4c52ac2c56/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts#L236

module.exports = {
  // .. rest of your config
  core: {
    channelOptions: { allowDate: false },
  },
  // .. rest of your config
}

ndelangen on Dec 14, 2022

explicit argType should override any implicit behaviour. If I specify the text argument then please render the text argument. My component accepts string as ISOString but currently is impossible to use text control

kresli on May 30, 2022

Note that this behavior occurs only when using Z as a timezone, i.e. 2021-01-21T21:02:00+01:00 works as expected but 2021-01-21T21:02:00Z doesn’t.

scscgit on Aug 19, 2021

I’m facing the same problem. I explicitly want to use plain ISO date strings as text input, a date control is not a replacement.

Is there any workaround? 🤔

jmaicher on Mar 2, 2021