AutoResizer only works once

[simonknittel]

Hi everyone!

I'm having the issue that the AutoResizer (absoluteElements: true) only works once per element.

I'm building a custom field which makes use of the DatePicker component. I've enabled the AutoResizer and set the flag absoluteElements to true.

On the first opening of the datepicker, the AutoResizer works as intended. When I close the datepicker and open it again, the iframe stays collapsed.

This happens once per datepicker per field

autoresizer.mov

Is there anything I'm missing?

[david-shibley-contentful]

Hey @simonknittel, thanks for reaching out!

Could you provide me with more information about your code? Otherwise, I can only guess what is missing. Is this a react project in which you are using useEffect? Perhaps you forgot to add the correct dependencies to the dependency array?

[simonknittel]

Hi @david-shibley-contentful,

Yes, it's a React app. Specifically, it's a Next.js app using the app router with a page that mounts the SDKProvider and content with use client. There is nothing else on the page.

There is no useEffect involved. I don't even know where it should be.

I've dumped it down to the most basic version:

"use client";

import { Datepicker } from "@contentful/f36-components";
import { useAutoResizer } from "@contentful/react-apps-toolkit";

export const App = () => {
  useAutoResizer({
    absoluteElements: true,
  });

  return (
    <>
      <Datepicker onSelect={() => {}} />
      <Datepicker onSelect={() => {}} />
    </>
  );
};

I've noticed, that it breaks as soon as I implement the Datepicker component more than once. When I have it only implemented once, the AutoResizer works as intended.

autoresizer2.mov

[simonknittel]

I've found a workaround. It works, when I set

popoverProps={{
  renderOnlyWhenOpen: false,
}}

on the datepicker components.