x-collapse overflow hidden

[reefki]

When using x-collapse I found that it adds overflow: hidden; style to the element even when it on collapsed state. I know that it's really necessary to get a smooth transition but it makes a little mess with my dropdown inside that being chopped due to the overflow: hidden;.

I think it's better to use overflow: initial; when the element not expanded and change it back to overflow: hidden; when starting the transition and when the element collapsed.

I don't know if that's possible but let see what @calebporzio think.

Thanks

[SimoTod]

Overflow:hidden is required when the element is collpased otherwise it would show the content of the div on your page when the height is 0
I think you meant to suggest removing it when the element is not collapsed and after the animation right?

P.s. https://twitter.com/calebporzio/status/1430564014464159749?t=jbKbTNhbKrDA6qF-eajv2Q&s=19

[reefki]

@SimoTod Yeah that's exactly what I meant

Also, thanks for the heads up on Caleb's tweet. My apologies.

[SimoTod]

It makes sense, I think you can send a Pr for this, it will probably get approved.

[areski]

Anyone found a temporary solution to this issue?

[ekwoka]

Okay, that makes more sense than the issue of it not removed when it's collapsed.

[AnthonyANI]

Just in case it's related, I added an x-on:transitionend="console.log('done transitioning')" to re-test it since I was having issues. And it also does not always fire. Not sure if that would be related to this issue or not. The problems appear to occur independently of each other, though both intermittent. Sometimes the overflow: hidden will be removed but the console log never happened or vice versa.

I did test that with Tailwind, which may have made it worse. I created a CodePen to try it without Tailwind and I couldn't get the problems to occur independently of each other. When the overflow: hidden failed to be removed after expanding, the x-on:transitionend also did not fire. https://codepen.io/AnthonyANI/full/dyQpRYN

[ekwoka]

Yes, I found transitionend to also be questionable on collapse.

[willvincent]

Just wanted to weigh in that this is still very much an issue even after PR #3243. What's really frustrating is that it's sort of intermittent, and not a zoom issue as that PR suggested.

I've omit x-collapse for the time being, which takes some of the gloss off the UI, but at least my ChoicesJS select field continues to function as expected within the collapsible div. Guess I may try that focusin workaround above, but it sure seems like this should just get fixed properly.

[code23-isaac]

I'm using x-collapse on a container with a max-height and overflow-y scrolling:

            <div x-show="isOpen" x-collapse class="overflow-y-auto lg:max-h-60">
                <div class="pb-5">
                    @foreach ($categoryList as $category)
                    @include('partials.shop-filter-categories', ['category' => $category])
                    @endforeach
                </div>
            </div>

By console logging the height comparison surrounding the overflow style reset (index.js:60):

if (el.getBoundingClientRect().height == full) {
   el.style.overflow = null
}

console.log(el.getBoundingClientRect().height, full);

it seems the heights don't match every time in chrome, and in safari they never match:

So for this scenario the plugin is broken in Safari as the overflow-hidden style is never removed, and intermittently broken in Chrome.

Is the height comparison around the nullifying of the overflow style required? Removing it fixes the issue, but maybe causes visual bugs on slower transitions?

[grey4owl]

I created a PR(#3949) that solves this.. I also added a optional modifier .overflow which preserve overflow after expanding if you want, and I changed overflow value from hidden to clip because it supports shadows and offset with overflow-clip-margin property..

[antiantivirus]

I managed to solve this by applying overflow-y: auto !important to the element with x-collapse.