Modal Transition

[RobertLeeMorgan]

I have a custom component that is conflicting with the modal. They are in completely different components on the same route. My custom component is a table with x-overflow(hidden). This component affects the transition effects when opening and closing the modal. I believe it is due to the way that the DOM still perceives the hidden cells of the table in overflow. Any ideas?

[saadeghi]

Can you share a code example?

[RobertLeeMorgan]

return (
    <div
      className={`${
        widgetDisplay ? "translate-y-0" : "translate-y-full"
      } fixed w-screen bottom-0 z-40 transform duration-300 ease-in-out`}
    >
      <>

        <Widgets year={year} />
        <Civil civil={civil} year={year} />

      </>
    </div>

If I conditionally render Civil component using widgetDisplay then modal transition works, but I lose the transition of this div. The civil component is pretty complex so I won't share it here (you can find my repo under tldrhistory -> client -> src -> components -> widgets). Removing the logic all the way at the end where blank cells are generated also fixes the issue, and this is what gives the table width.

[RobertLeeMorgan]

Found the issue, it was actually a drawer component that I was using to filter searches. I had it set up to close upon applying or clearing the search using conditional rendering, this is what was affecting the transition of the other components.