[Addon: Knobs] Updating text fields is laggy and frequently overwrites keys. #6005

kristremblay · 2019-03-10T20:39:43Z

Describe the bug
Editing text fields in knobs seemingly lags behind key presses, and deletes any characters after one of such instances. It's like the state is updating in a convoluted manner, and previously entered characters are overwritten. For example, quickly typing "Kris Tremblay" at the same speed I'd normally type yielded "Krisblay".

To Reproduce
Steps to reproduce the behavior:

Open any component with a text knob
Change the text knob to a string that is more than a couple characters long (maybe write your name)

Expected behavior
The field should act as a normal input, and changes should be reflected in the component.

Code snippets
The following is my test story for an ActionButton component.

import { storiesOf } from '@storybook/vue';
import { withKnobs, text, select, boolean} from '@storybook/addon-knobs';

import ActionButton from '../src/components/ActionButton.vue';

const actionButtonStories = storiesOf('Action Buttons', module);
actionButtonStories.addDecorator(withKnobs);

const actionButtonClasses = {
  Attention: 'action__button--attention',
  No: 'action__button--no',
  Ok: 'action__button--ok',
  Primary: 'action__button--primary'
};

actionButtonStories.add('with added Sexy', () => ({
  components: { ActionButton },
  props: {
    className: {
      default: select('Class', actionButtonClasses, 'action__button--primary')
    },
    disabled: {
      default: boolean('Disabled', false)
    },
    text: {
      default: text('Text', 'Action Button')
    }
  },
  template: `<div>
    <ActionButton :class="className" :disabled="disabled">{{ text }}</ActionButton>
  </div>`
}));

System:

OS: Windows 10
Device: Beefy PC
Browser: Replicated in Chrome and Edge
Framework: VueJS
Addons: Knobs
Version: 5.0.1

The text was updated successfully, but these errors were encountered:

kristremblay · 2019-03-10T20:46:38Z

Is it possible it has something to do with the debounce in KnobStore?

shilman · 2019-03-11T01:51:23Z

@CodeByAlex mind taking a look at this? I suspect it's related to #5811

CodeByAlex · 2019-03-11T02:01:07Z

@kristremblay, do you know if this was introduced in 5.0.1 or was it present in 5.0.0

kristremblay · 2019-03-11T02:03:06Z

@CodeByAlex I just started using Storyboard today so I actually don't know.

CodeByAlex · 2019-03-11T02:11:40Z

@kristremblay, welcome to the community! Would you mind reverting your version of addon/knobs to 5.0 and check. A piece of code that debounces other than what you mentioned above was added to fix the symptoms you are seeing. It would be great if we could pinpoint whether the change had an unintended impact or if the issue was already present.

On a separate note, I’m wondering what if the need for the 50ms Debounce in the store is still needed.

kristremblay · 2019-03-11T02:20:42Z

Thanks! This is a great product you guys have made and it's certainly making my life easier :)

It looks like it is working properly in 5.0.0. I saw the debounce and assumed that had something to do with it.

CodeByAlex · 2019-03-11T02:24:12Z

That’s good to know. @shilman I’ll take a look into this further.

shilman · 2019-03-11T02:46:38Z

@CodeByAlex @ndelangen How about posting the knob change when the user hits enter or focus leaves the text field, rather than on every key press?

kylepeeler · 2019-03-11T02:51:19Z

I have the exact same issue. Was happening in 5.0 and upgraded to 5.0.1 and the issue seemed to be fixed slightly but I still have to type slower than usual without characters being dropped. I think posting the knob update on blur of the knob would be better IMO

CodeByAlex · 2019-03-11T03:01:30Z

@shilman it looks like the Debounce that was added to reduce lag on the Angular side caused the choppy text entry/dropping of characters that @kristremblay was mentioning in Vue. We will have to back that out and put in a different solution. The frameworks seem to react differently to this knobs rendering logic in general.

kylepeeler · 2019-03-11T03:26:12Z

I can provide links to anyone who picks up this issue with examples that we are experiencing this on both 5.0.0 and 5.0.1 so I'm not so sure its a direct result of the 5.0.1 changes, I just can't share the links publically since its a proprietary storybook. If you DM me (shared them with @shilman on discord as well) I can send you links of the issue happening on both versions.

CodeByAlex · 2019-03-11T03:36:37Z

@shilman @kylepeeler @kristremblay
Heres what Im thinking

const debouncedOnKnobChanged = debounce(change => {
  knobStore.markAllUnused();
  forceReRender();
}, 400);

function knobChanged(change) {
  var name = change.name,
  value = change.value; // Update the related knob and it's value.
  var knobOptions = knobStore.get(name);
  knobOptions.value = value;
  debouncedOnKnobChanged(change);
}

So as of the 5.0.1 update, the logic in the debounce function consisted of:

  var name = change.name,
  value = change.value; // Update the related knob and it's value.
  var knobOptions = knobStore.get(name);
  knobOptions.value = value;
  knobStore.markAllUnused();
  forceReRender();

After adding the following back in the onchanged function before the debounce, the issue in vue is resolved:

  var name = change.name,
  value = change.value; // Update the related knob and it's value.
  var knobOptions = knobStore.get(name);
  knobOptions.value = value;

To better handle the debouncing and force rendering, instead of waiting for a user to click out of the field, we should wait for a longer pause before rendering. In the 5.0.1 version, its waiting 150ms which is a little faster than the average typing speed. I suggest we wait closer to 400ms and then just have it render when the user has completed their thought. What do you guys think?

kristremblay · 2019-03-11T03:40:07Z

I think that's a good solution. Let's see how it works in the next commit :)

CodeByAlex · 2019-03-11T16:03:31Z

PR for this change can be found here: #6022

shilman · 2019-03-12T21:35:27Z

Crikey!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.5 containing PR #6022 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

kristremblay · 2019-03-12T22:48:46Z

@shilman Perhaps I'm doing something wrong, but running npm install @storybook/knobs@next and installing 5.1.0-alpha.5 causes a problem where clicking on the Knobs tab kills the application. White screen with the following console dump:

vendors~main.c2014981fb34776cf713.bundle.js:129299 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    in Unknown (created by Context.Consumer)
    in Styled(Component) (created by KnobPanel)
    in KnobPanel
    in div (created by Context.Consumer)
    in Styled(div)
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by Context.Consumer)
    in _default (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout) (created by ResizeDetector)
    in ResizeDetector
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by ResizeDetector)
    in ResizeDetector
    in Unknown
    in Unknown (created by Manager)
    in ThemeProvider (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root
warningWithoutStack @ vendors~main.c2014981fb34776cf713.bundle.js:129299
warning @ vendors~main.c2014981fb34776cf713.bundle.js:129714
createElementWithValidation @ vendors~main.c2014981fb34776cf713.bundle.js:130841
(anonymous) @ vendors~main.c2014981fb34776cf713.bundle.js:4666
renderWithHooks @ vendors~main.c2014981fb34776cf713.bundle.js:97120
mountIndeterminateComponent @ vendors~main.c2014981fb34776cf713.bundle.js:99202
beginWork @ vendors~main.c2014981fb34776cf713.bundle.js:99807
performUnitOfWork @ vendors~main.c2014981fb34776cf713.bundle.js:103494
workLoop @ vendors~main.c2014981fb34776cf713.bundle.js:103534
renderRoot @ vendors~main.c2014981fb34776cf713.bundle.js:103617
performWorkOnRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104524
performWork @ vendors~main.c2014981fb34776cf713.bundle.js:104436
performSyncWork @ vendors~main.c2014981fb34776cf713.bundle.js:104410
interactiveUpdates$1 @ vendors~main.c2014981fb34776cf713.bundle.js:104677
interactiveUpdates @ vendors~main.c2014981fb34776cf713.bundle.js:86398
dispatchInteractiveEvent @ vendors~main.c2014981fb34776cf713.bundle.js:89110
vendors~main.c2014981fb34776cf713.bundle.js:129299 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    in Unknown (created by Context.Consumer)
    in Styled(Component) (created by KnobPanel)
    in KnobPanel
    in div (created by Context.Consumer)
    in Styled(div)
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by Context.Consumer)
    in _default (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout) (created by ResizeDetector)
    in ResizeDetector
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by ResizeDetector)
    in ResizeDetector
    in Unknown
    in Unknown (created by Manager)
    in ThemeProvider (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root
warningWithoutStack @ vendors~main.c2014981fb34776cf713.bundle.js:129299
warning @ vendors~main.c2014981fb34776cf713.bundle.js:129714
createElementWithValidation @ vendors~main.c2014981fb34776cf713.bundle.js:130841
(anonymous) @ vendors~main.c2014981fb34776cf713.bundle.js:4666
renderWithHooks @ vendors~main.c2014981fb34776cf713.bundle.js:97120
mountIndeterminateComponent @ vendors~main.c2014981fb34776cf713.bundle.js:99202
beginWork @ vendors~main.c2014981fb34776cf713.bundle.js:99807
performUnitOfWork @ vendors~main.c2014981fb34776cf713.bundle.js:103494
workLoop @ vendors~main.c2014981fb34776cf713.bundle.js:103534
callCallback @ vendors~main.c2014981fb34776cf713.bundle.js:84377
invokeGuardedCallbackDev @ vendors~main.c2014981fb34776cf713.bundle.js:84427
invokeGuardedCallback @ vendors~main.c2014981fb34776cf713.bundle.js:84484
replayUnitOfWork @ vendors~main.c2014981fb34776cf713.bundle.js:102760
renderRoot @ vendors~main.c2014981fb34776cf713.bundle.js:103650
performWorkOnRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104524
performWork @ vendors~main.c2014981fb34776cf713.bundle.js:104436
performSyncWork @ vendors~main.c2014981fb34776cf713.bundle.js:104410
interactiveUpdates$1 @ vendors~main.c2014981fb34776cf713.bundle.js:104677
interactiveUpdates @ vendors~main.c2014981fb34776cf713.bundle.js:86398
dispatchInteractiveEvent @ vendors~main.c2014981fb34776cf713.bundle.js:89110
vendors~main.c2014981fb34776cf713.bundle.js:84283 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at invariant (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:84283:15)
    at createFiberFromTypeAndProps (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:94420:11)
    at createFiberFromElement (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:94441:15)
    at reconcileSingleElement (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:96713:23)
    at reconcileChildFibers (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:96770:35)
    at reconcileChildren (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:98584:28)
    at mountIndeterminateComponent (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:99246:5)
    at beginWork (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:99807:16)
    at performUnitOfWork (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:103494:12)
    at workLoop (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:103534:24)
invariant @ vendors~main.c2014981fb34776cf713.bundle.js:84283
createFiberFromTypeAndProps @ vendors~main.c2014981fb34776cf713.bundle.js:94420
createFiberFromElement @ vendors~main.c2014981fb34776cf713.bundle.js:94441
reconcileSingleElement @ vendors~main.c2014981fb34776cf713.bundle.js:96713
reconcileChildFibers @ vendors~main.c2014981fb34776cf713.bundle.js:96770
reconcileChildren @ vendors~main.c2014981fb34776cf713.bundle.js:98584
mountIndeterminateComponent @ vendors~main.c2014981fb34776cf713.bundle.js:99246
beginWork @ vendors~main.c2014981fb34776cf713.bundle.js:99807
performUnitOfWork @ vendors~main.c2014981fb34776cf713.bundle.js:103494
workLoop @ vendors~main.c2014981fb34776cf713.bundle.js:103534
callCallback @ vendors~main.c2014981fb34776cf713.bundle.js:84377
invokeGuardedCallbackDev @ vendors~main.c2014981fb34776cf713.bundle.js:84427
invokeGuardedCallback @ vendors~main.c2014981fb34776cf713.bundle.js:84484
replayUnitOfWork @ vendors~main.c2014981fb34776cf713.bundle.js:102760
renderRoot @ vendors~main.c2014981fb34776cf713.bundle.js:103650
performWorkOnRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104524
performWork @ vendors~main.c2014981fb34776cf713.bundle.js:104436
performSyncWork @ vendors~main.c2014981fb34776cf713.bundle.js:104410
interactiveUpdates$1 @ vendors~main.c2014981fb34776cf713.bundle.js:104677
interactiveUpdates @ vendors~main.c2014981fb34776cf713.bundle.js:86398
dispatchInteractiveEvent @ vendors~main.c2014981fb34776cf713.bundle.js:89110
vendors~main.c2014981fb34776cf713.bundle.js:101299 The above error occurred in one of your React components:
    in Unknown (created by Context.Consumer)
    in Styled(Component) (created by KnobPanel)
    in KnobPanel
    in div (created by Context.Consumer)
    in Styled(div)
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by Context.Consumer)
    in _default (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout) (created by ResizeDetector)
    in ResizeDetector
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by ResizeDetector)
    in ResizeDetector
    in Unknown
    in Unknown (created by Manager)
    in ThemeProvider (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.
logCapturedError @ vendors~main.c2014981fb34776cf713.bundle.js:101299
logError @ vendors~main.c2014981fb34776cf713.bundle.js:101335
callback @ vendors~main.c2014981fb34776cf713.bundle.js:102276
callCallback @ vendors~main.c2014981fb34776cf713.bundle.js:100615
commitUpdateEffects @ vendors~main.c2014981fb34776cf713.bundle.js:100654
commitUpdateQueue @ vendors~main.c2014981fb34776cf713.bundle.js:100645
commitLifeCycles @ vendors~main.c2014981fb34776cf713.bundle.js:101546
commitAllLifeCycles @ vendors~main.c2014981fb34776cf713.bundle.js:102918
callCallback @ vendors~main.c2014981fb34776cf713.bundle.js:84377
invokeGuardedCallbackDev @ vendors~main.c2014981fb34776cf713.bundle.js:84427
invokeGuardedCallback @ vendors~main.c2014981fb34776cf713.bundle.js:84484
commitRoot @ vendors~main.c2014981fb34776cf713.bundle.js:103130
(anonymous) @ vendors~main.c2014981fb34776cf713.bundle.js:104600
unstable_runWithPriority @ vendors~main.c2014981fb34776cf713.bundle.js:135906
completeRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104599
performWorkOnRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104528
performWork @ vendors~main.c2014981fb34776cf713.bundle.js:104436
performSyncWork @ vendors~main.c2014981fb34776cf713.bundle.js:104410
interactiveUpdates$1 @ vendors~main.c2014981fb34776cf713.bundle.js:104677
interactiveUpdates @ vendors~main.c2014981fb34776cf713.bundle.js:86398
dispatchInteractiveEvent @ vendors~main.c2014981fb34776cf713.bundle.js:89110
vendors~main.c2014981fb34776cf713.bundle.js:84283 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at invariant (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:84283:15)
    at createFiberFromTypeAndProps (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:94420:11)
    at createFiberFromElement (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:94441:15)
    at reconcileSingleElement (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:96713:23)
    at reconcileChildFibers (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:96770:35)
    at reconcileChildren (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:98584:28)
    at mountIndeterminateComponent (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:99246:5)
    at beginWork (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:99807:16)
    at performUnitOfWork (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:103494:12)
    at workLoop (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:103534:24)
invariant @ vendors~main.c2014981fb34776cf713.bundle.js:84283
createFiberFromTypeAndProps @ vendors~main.c2014981fb34776cf713.bundle.js:94420
createFiberFromElement @ vendors~main.c2014981fb34776cf713.bundle.js:94441
reconcileSingleElement @ vendors~main.c2014981fb34776cf713.bundle.js:96713
reconcileChildFibers @ vendors~main.c2014981fb34776cf713.bundle.js:96770
reconcileChildren @ vendors~main.c2014981fb34776cf713.bundle.js:98584
mountIndeterminateComponent @ vendors~main.c2014981fb34776cf713.bundle.js:99246
beginWork @ vendors~main.c2014981fb34776cf713.bundle.js:99807
performUnitOfWork @ vendors~main.c2014981fb34776cf713.bundle.js:103494
workLoop @ vendors~main.c2014981fb34776cf713.bundle.js:103534
renderRoot @ vendors~main.c2014981fb34776cf713.bundle.js:103617
performWorkOnRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104524
performWork @ vendors~main.c2014981fb34776cf713.bundle.js:104436
performSyncWork @ vendors~main.c2014981fb34776cf713.bundle.js:104410
interactiveUpdates$1 @ vendors~main.c2014981fb34776cf713.bundle.js:104677
interactiveUpdates @ vendors~main.c2014981fb34776cf713.bundle.js:86398
dispatchInteractiveEvent @ vendors~main.c2014981fb34776cf713.bundle.js:89110
vendors~main.c2014981fb34776cf713.bundle.js:101299 The above error occurred in the <LocationProvider> component:
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ vendors~main.c2014981fb34776cf713.bundle.js:101299
logError @ vendors~main.c2014981fb34776cf713.bundle.js:101335
update.callback @ vendors~main.c2014981fb34776cf713.bundle.js:102247
callCallback @ vendors~main.c2014981fb34776cf713.bundle.js:100615
commitUpdateEffects @ vendors~main.c2014981fb34776cf713.bundle.js:100654
commitUpdateQueue @ vendors~main.c2014981fb34776cf713.bundle.js:100642
commitLifeCycles @ vendors~main.c2014981fb34776cf713.bundle.js:101565
commitAllLifeCycles @ vendors~main.c2014981fb34776cf713.bundle.js:102918
callCallback @ vendors~main.c2014981fb34776cf713.bundle.js:84377
invokeGuardedCallbackDev @ vendors~main.c2014981fb34776cf713.bundle.js:84427
invokeGuardedCallback @ vendors~main.c2014981fb34776cf713.bundle.js:84484
commitRoot @ vendors~main.c2014981fb34776cf713.bundle.js:103130
(anonymous) @ vendors~main.c2014981fb34776cf713.bundle.js:104600
unstable_runWithPriority @ vendors~main.c2014981fb34776cf713.bundle.js:135906
completeRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104599
performWorkOnRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104528
performWork @ vendors~main.c2014981fb34776cf713.bundle.js:104436
performSyncWork @ vendors~main.c2014981fb34776cf713.bundle.js:104410
interactiveUpdates$1 @ vendors~main.c2014981fb34776cf713.bundle.js:104677
interactiveUpdates @ vendors~main.c2014981fb34776cf713.bundle.js:86398
dispatchInteractiveEvent @ vendors~main.c2014981fb34776cf713.bundle.js:89110
vendors~main.c2014981fb34776cf713.bundle.js:84283 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at invariant (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:84283:15)
    at createFiberFromTypeAndProps (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:94420:11)
    at createFiberFromElement (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:94441:15)
    at reconcileSingleElement (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:96713:23)
    at reconcileChildFibers (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:96770:35)
    at reconcileChildren (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:98584:28)
    at mountIndeterminateComponent (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:99246:5)
    at beginWork (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:99807:16)
    at performUnitOfWork (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:103494:12)
    at workLoop (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:103534:24)
invariant @ vendors~main.c2014981fb34776cf713.bundle.js:84283
createFiberFromTypeAndProps @ vendors~main.c2014981fb34776cf713.bundle.js:94420
createFiberFromElement @ vendors~main.c2014981fb34776cf713.bundle.js:94441
reconcileSingleElement @ vendors~main.c2014981fb34776cf713.bundle.js:96713
reconcileChildFibers @ vendors~main.c2014981fb34776cf713.bundle.js:96770
reconcileChildren @ vendors~main.c2014981fb34776cf713.bundle.js:98584
mountIndeterminateComponent @ vendors~main.c2014981fb34776cf713.bundle.js:99246
beginWork @ vendors~main.c2014981fb34776cf713.bundle.js:99807
performUnitOfWork @ vendors~main.c2014981fb34776cf713.bundle.js:103494
workLoop @ vendors~main.c2014981fb34776cf713.bundle.js:103534
renderRoot @ vendors~main.c2014981fb34776cf713.bundle.js:103617
performWorkOnRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104524
performWork @ vendors~main.c2014981fb34776cf713.bundle.js:104436
performSyncWork @ vendors~main.c2014981fb34776cf713.bundle.js:104410
interactiveUpdates$1 @ vendors~main.c2014981fb34776cf713.bundle.js:104677
interactiveUpdates @ vendors~main.c2014981fb34776cf713.bundle.js:86398
dispatchInteractiveEvent @ vendors~main.c2014981fb34776cf713.bundle.js:89110

shilman · 2019-03-13T00:28:06Z

@kristremblay Hmm try clearing out node_modules and reinstalling?

kristremblay · 2019-03-13T00:37:52Z

@shilman No luck, same errors.

CodeByAlex · 2019-03-13T00:50:45Z

Have you tried deleting your package.lock file?

…

On Tue, Mar 12, 2019 at 8:38 PM Kris Tremblay ***@***.***> wrote: @shilman <https://github.com/shilman> No luck, same errors. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6005 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AcYoBiAfAV30ulIrrAmzekbJ5X8EfScMks5vWEhsgaJpZM4bnfUw> .

kristremblay · 2019-03-13T00:54:07Z

Yup, still busted.

kristremblay · 2019-03-13T01:13:38Z

I'm going to go try it on my mbp and see if it's having the same issue.

kristremblay · 2019-03-13T02:20:53Z

@CodeByAlex @shilman Nope, same thing on both machines, went through deleting node_modules and package-lock.json.

shilman · 2019-03-13T02:48:06Z

Hmm not sure what to say. It's working fine in our demo Vue storybook and I can't think of any changes in 5.1 that would cause this error and nothing about your story above jumps out at me.

Here are some things I'd try:

Delete all the knobs from the story, does it still crash?
If not, add them back to see which one is causing it?
If you revert back to 5.0.x does it stop crashing?
Etc. etc

Thanks for your patience on this!

kristremblay · 2019-03-13T03:11:01Z

I’ll have to double check when I get home in a few hours.

Reverting to 5.0.x works (with 5.0.0 being the best one as far as the debounce issue is concerned).

I really appreciate the responsiveness, I just wanna see it work :D

Nejik · 2019-03-13T07:14:28Z

Same error after upgrade to alpha5. Vue project created with vue cli and vue cli storybook

folder node_modules was deleted.
package_lock was deleted
story without knobs working fine, crashing only on story with knobs.

In package.json:
"@storybook/vue": "^v5.1.0-alpha.5",
"@storybook/addons": "^v5.1.0-alpha.5",
"@storybook/addon-actions": "^v5.1.0-alpha.5",
"@storybook/addon-cssresources": "^v5.1.0-alpha.5",
"@storybook/addon-knobs": "v5.1.0-alpha.5",
"@storybook/addon-links": "^v5.1.0-alpha.5",
"@storybook/addon-notes": "^v5.1.0-alpha.5",
"@storybook/addon-storysource": "^v5.1.0-alpha.5",

Reverting to 5.0.0 works. 5.0.1 was bad update to knobs)

kristremblay · 2019-03-13T19:53:44Z

@shilman
@Nejik beat me to it. This is what I’m experiencing.

shilman · 2019-03-17T05:10:32Z

Jeepers creepers!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.2 containing PR #6022 that references this issue. Upgrade today to try it out!

backbone87 · 2019-03-18T08:13:30Z

since the 4.2 alpha introduced my changes to the storybook vue, debouncing the knobs should not be necessary at all for vue, since we properly change the props of the components in a reactive "vue way".

rdm · 2019-08-02T17:01:35Z

General note:

Debounce can be necessary on systems with poorly functioning keyboards (not that macbooks have ever had anything other than perfect keyboards).

However, debounce should, by default, only take effect for quickly repeated instances of the same character.

shilman added bug addon: knobs labels Mar 11, 2019

shilman added this to the 5.0.x milestone Mar 11, 2019

shilman added the high priority label Mar 11, 2019

CodeByAlex mentioned this issue Mar 11, 2019

Modified the Knobs onChange debounce function so that knob storage occurs on keypress but rendering waits until debouncing has completed #6022

Merged

shilman closed this as completed Mar 12, 2019

jonrimmer mentioned this issue Mar 15, 2019

Fix performance of Angular rerender #6094

Merged

lyqht mentioned this issue Jun 3, 2019

addon-knobs for React-Native not working #6918

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Addon: Knobs] Updating text fields is laggy and frequently overwrites keys. #6005

[Addon: Knobs] Updating text fields is laggy and frequently overwrites keys. #6005

kristremblay commented Mar 10, 2019 •

edited

Loading

kristremblay commented Mar 10, 2019

shilman commented Mar 11, 2019

CodeByAlex commented Mar 11, 2019

kristremblay commented Mar 11, 2019

CodeByAlex commented Mar 11, 2019 •

edited

Loading

kristremblay commented Mar 11, 2019

CodeByAlex commented Mar 11, 2019 •

edited

Loading

shilman commented Mar 11, 2019

kylepeeler commented Mar 11, 2019

CodeByAlex commented Mar 11, 2019 •

edited

Loading

kylepeeler commented Mar 11, 2019 •

edited

Loading

CodeByAlex commented Mar 11, 2019 •

edited

Loading

kristremblay commented Mar 11, 2019

CodeByAlex commented Mar 11, 2019

shilman commented Mar 12, 2019

kristremblay commented Mar 12, 2019

shilman commented Mar 13, 2019

kristremblay commented Mar 13, 2019

CodeByAlex commented Mar 13, 2019 via email

kristremblay commented Mar 13, 2019

kristremblay commented Mar 13, 2019

kristremblay commented Mar 13, 2019

shilman commented Mar 13, 2019

kristremblay commented Mar 13, 2019

Nejik commented Mar 13, 2019 •

edited

Loading

kristremblay commented Mar 13, 2019

shilman commented Mar 17, 2019

backbone87 commented Mar 18, 2019

rdm commented Aug 2, 2019

[Addon: Knobs] Updating text fields is laggy and frequently overwrites keys. #6005

[Addon: Knobs] Updating text fields is laggy and frequently overwrites keys. #6005

Comments

kristremblay commented Mar 10, 2019 • edited Loading

kristremblay commented Mar 10, 2019

shilman commented Mar 11, 2019

CodeByAlex commented Mar 11, 2019

kristremblay commented Mar 11, 2019

CodeByAlex commented Mar 11, 2019 • edited Loading

kristremblay commented Mar 11, 2019

CodeByAlex commented Mar 11, 2019 • edited Loading

shilman commented Mar 11, 2019

kylepeeler commented Mar 11, 2019

CodeByAlex commented Mar 11, 2019 • edited Loading

kylepeeler commented Mar 11, 2019 • edited Loading

CodeByAlex commented Mar 11, 2019 • edited Loading

kristremblay commented Mar 11, 2019

CodeByAlex commented Mar 11, 2019

shilman commented Mar 12, 2019

kristremblay commented Mar 12, 2019

shilman commented Mar 13, 2019

kristremblay commented Mar 13, 2019

CodeByAlex commented Mar 13, 2019 via email

kristremblay commented Mar 13, 2019

kristremblay commented Mar 13, 2019

kristremblay commented Mar 13, 2019

shilman commented Mar 13, 2019

kristremblay commented Mar 13, 2019

Nejik commented Mar 13, 2019 • edited Loading

kristremblay commented Mar 13, 2019

shilman commented Mar 17, 2019

backbone87 commented Mar 18, 2019

rdm commented Aug 2, 2019

kristremblay commented Mar 10, 2019 •

edited

Loading

CodeByAlex commented Mar 11, 2019 •

edited

Loading

CodeByAlex commented Mar 11, 2019 •

edited

Loading

CodeByAlex commented Mar 11, 2019 •

edited

Loading

kylepeeler commented Mar 11, 2019 •

edited

Loading

CodeByAlex commented Mar 11, 2019 •

edited

Loading

Nejik commented Mar 13, 2019 •

edited

Loading