powerhome/playbook

Select component breaks when `error` prop changes [NUXE-655]

gmfvpereira opened this issue · 2 comments

gmfvpereira commented

Describe the bug
When error props change the Select component breaks with this error:

react-dom.development.js:9269 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insertBefore (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:75846:22)
    at commitPlacement (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:85195:15)
    at commitAllHostEffects (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:86168:15)
    at HTMLUnknownElement.callCallback (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:66726:18)
    at Object.invokeGuardedCallbackDev (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:66775:20)
    at invokeGuardedCallback (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:66829:35)
    at commitRoot (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:86439:11)
    at http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:88025:9
    at Object.unstable_runWithPriority (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:100901:16)
    at completeRoot (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:88024:17)
insertBefore @ react-dom.development.js:9269
commitPlacement @ react-dom.development.js:18618
commitAllHostEffects @ react-dom.development.js:19591
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:198
invokeGuardedCallback @ react-dom.development.js:252
commitRoot @ react-dom.development.js:19862
(anonymous) @ react-dom.development.js:21448
unstable_runWithPriority @ scheduler.development.js:257
completeRoot @ react-dom.development.js:21447
performWorkOnRoot @ react-dom.development.js:21370
performWork @ react-dom.development.js:21275
performSyncWork @ react-dom.development.js:21249
interactiveUpdates$1 @ react-dom.development.js:21534
interactiveUpdates @ react-dom.development.js:2270
dispatchInteractiveEvent @ react-dom.development.js:5088
react_devtools_backend.js:2430 The above error occurred in the <Body> component:
    in Body (at _select.jsx:121)
    in label (at _select.jsx:96)
    in div (at _select.jsx:81)
    in ForwardRef(Select) (at _select_error_toggle.jsx:24)
    in div (at _select_error_toggle.jsx:23)
    in SelectErrorToggle

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.
overrideMethod @ react_devtools_backend.js:2430
logCapturedError @ react-dom.development.js:17882
logError @ react-dom.development.js:17918
update.callback @ react-dom.development.js:18941
callCallback @ react-dom.development.js:17106
commitUpdateEffects @ react-dom.development.js:17146
commitUpdateQueue @ react-dom.development.js:17134
commitLifeCycles @ react-dom.development.js:18174
commitAllLifeCycles @ react-dom.development.js:19676
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:198
invokeGuardedCallback @ react-dom.development.js:252
commitRoot @ react-dom.development.js:19900
(anonymous) @ react-dom.development.js:21448
unstable_runWithPriority @ scheduler.development.js:257
completeRoot @ react-dom.development.js:21447
performWorkOnRoot @ react-dom.development.js:21370
performWork @ react-dom.development.js:21275
performSyncWork @ react-dom.development.js:21249
interactiveUpdates$1 @ react-dom.development.js:21534
interactiveUpdates @ react-dom.development.js:2270
dispatchInteractiveEvent @ react-dom.development.js:5088
react-dom.development.js:21335 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insertBefore (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:75846:22)
    at commitPlacement (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:85195:15)
    at commitAllHostEffects (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:86168:15)
    at HTMLUnknownElement.callCallback (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:66726:18)
    at Object.invokeGuardedCallbackDev (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:66775:20)
    at invokeGuardedCallback (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:66829:35)
    at commitRoot (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:86439:11)
    at http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:88025:9
    at Object.unstable_runWithPriority (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:100901:16)
    at completeRoot (http://localhost:8089/packs/js/4-de6ed0b66dc43784f6c9.chunk.js:88024:17)

I tried creating a test to reproduce the error but it's not failing. I'm not sure why yet, but I figured it would be good to share here in case you know about this problem already.

To Reproduce
Steps to reproduce the behavior:

  1. Check out branch LGA/select-toggle-error
  2. Run playbook
  3. Go to "Select w/ Error toggle" example
  4. Click the Toggle button

Expected behavior
The error should show up and hide as we toggle the prop through the toggle button.

gmfvpereira commented

We spot the problem while working with a Formik form. After clicking submit with a validation error in a Select input the page will break up.

thestephenmarshall commented

Sorry for the delay on this. Confirmed. Story added https://nitro.powerhrg.com/runway/backlog_items/NUXE-655. Slated for upcoming sprint.

  • ❤️1