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.)

[scscgit]

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).

[ndelangen]

@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!