TypeError: Cannot read property 'getBoundingClientRect' of null

[pebcakerror]

When using the code provided by the builder on the homepage I get an error after clicking on the toggle. It displays without error on initial render.

Threw mostly stripped down code: https://github.com/pebcakerror/nav-poc

TypeError: Cannot read property 'getBoundingClientRect' of null
(anonymous function)
C:/DEV/projects/misc/src/ToggleLayer/ToggleLayer.tsx:81
  78 | const isOpen = isSet(isOpenExternal) ? isOpenExternal! : isOpenInternal;
  79 | 
  80 | const handlePositioning = React.useCallback(() => {
> 81 |   const triggerRect = triggerElement!.getBoundingClientRect();
     | ^  82 | 
  83 |   const result = getPositioning({
  84 |     triggerRect,
View compiled
(anonymous function)
C:/DEV/projects/misc/src/ToggleLayer/ToggleLayer.tsx:203
  200 |   //   throw new Error("Please provide a valid ref to the layer element");
  201 |   // }
  202 | 
> 203 |   handlePositioning();
      | ^  204 | });
  205 | 
  206 | // calculate new layer style when window size changes
View compiled
▼ 20 stack frames were expanded.
commitHookEffectList
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:22030
commitLifeCycles
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:22080
commitLayoutEffects
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:25344
HTMLUnknownElement.callCallback
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:336
invokeGuardedCallbackDev
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:385
invokeGuardedCallback
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:440
commitRootImpl
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:25082
unstable_runWithPriority
C:/DEV/projects/misc/nav-poc/node_modules/scheduler/cjs/scheduler.development.js:697
runWithPriority$2
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:12149
commitRoot
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:24922
finishSyncRender
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:24329
performSyncWorkOnRoot
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:24307
(anonymous function)
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:12199
unstable_runWithPriority
C:/DEV/projects/misc/nav-poc/node_modules/scheduler/cjs/scheduler.development.js:697
runWithPriority$2
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:12149
flushSyncCallbackQueueImpl
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:12194
flushSyncCallbackQueue
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:12182
discreteUpdates$1
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:24423
discreteUpdates
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:1438
dispatchDiscreteEvent
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:5881
▲ 20 stack frames were expanded.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

https://github.com/pebcakerror/nav-poc/blob/master/src/components/AppHeader/components/ProfileNav/ProfileNav.js:

import React from "react";
import { ToggleLayer } from "react-laag";

function ProfileNav() {
  return (
    <ToggleLayer
      renderLayer={({ isOpen, layerProps }) =>
        isOpen && (
          <div
            ref={layerProps.ref}
            className="layer"
            style={{
              ...layerProps.style,
              width: 150,
              height: 100,
              backgroundColor: "#e7f5ff",
              borderWidth: 1,
              borderColor: "#d8d6d9"
            }}
          >
            Layer
          </div>
        )
      }
      placement={{
        autoAdjust: true,
        triggerOffset: 10
      }}
    >
      {({ innerRef, toggle }) => (
        <button ref={innerRef} className="toggle-btn" onClick={toggle}>
          Toggle
        </button>
      )}
    </ToggleLayer>
  );
}

export default ProfileNav;

[everweij]

Hi Jonathan, thanks for reporting this issue! I think I know what the problem is here. In the builder's code preview section I mention innerRef, but instead it should be triggerRef. My mistake 😅. I've updated the builder screen, and updated the package so that it will throw a more meaningful error when something is not right regarding the reference to the trigger element. Does this fix your problem?

[everweij]

I'm gonna close this issue for now. If you still encounter bug, please don't hesitate to open this issue again ;)