🐞 - `.t-mark` in `tui-radio` disappears after toggling `tui-expand` about taiga-ui HOT 10 CLOSED

Sure. We will fix this bug before moving to 4.0 and new controls. It's just a tip for those who need it now.

from taiga-ui.

@waterplea I can try to fix this one. Do we know any possible reasons of why this bug happens?

from taiga-ui.

@waterplea I can try to fix this one. Do we know any possible reasons of why this bug happens?

This is most likely a bug with Angular animations. You can try removing angular animation from radio and instead use CSS transform to scale it.

from taiga-ui.

As a workaround for now, you can start switching to the new radio component which is planned to replace current one:
https://taiga-ui.dev/experimental/radio

from taiga-ui.

But it's a workaround only for plain radio. Labeled radio and radio block still use non-experimental radion under the hood.

from taiga-ui.

You can try removing angular animation from radio and instead use CSS transform to scale it.

This is work. And i also found that tuiParentAnimation cause this bug. I don't know exactly why, for some reason it's just blocks child animation. I removed tuiScaleAnimation, CSS animation looks like this:

@keyframes scaleIn {
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}

from taiga-ui.

Parent animation is there to kick in :leave animations — it's a long standing Angular bug. What if you add the same line to kick in :enter animations in TUI_PARENT_ANIMATION? Would that fix the issue? Not that it's better than CSS solution, just want to fix tuiParentAnimation as well, if possible.

from taiga-ui.

Parent animation is there to kick in :leave animations — it's a long standing Angular bug. What if you add the same line to kick in :enter animations in TUI_PARENT_ANIMATION? Would that fix the issue? Not that it's better than CSS solution, just want to fix tuiParentAnimation as well, if possible.

Yeah, i know about this bug. I added this in TUI_PARENT_ANIMATION, but it has zero effect:

transition(`:enter`, [query(`* <=> *`, [animateChild()], {optional: true})]),

And also, what is the :scope selector? I see this for the first time

transition(`:leave`, [query(`:scope > *`, [animateChild()], {optional: true})]),

from taiga-ui.

Yeah, I meant to try that. Ok, if it doesn't work then let's leave it at that. :scope selector is kinda like this in CSS:
https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

from taiga-ui.

As for the CSS animation — remove ngIf so this .t-mark is always there and just toggle some class like .t-mark_visible and use transition instead of animation. This way to would work both ways.

from taiga-ui.