Checkbox slider with lose animation if label changes

[4ndv]

Steps

const checkboxLabel = this.context.intl.formatMessage({ id: this.state.enabled ? 'autoreply.statusEnabled' : 'autoreply.statusDisabled' })

return (<Checkbox
            name='enabled'
            onChange={this.handleCheckboxChange.bind(this)}
            checked={this.state.enabled}
            slider
            label={checkboxLabel} />)

Expected Result

Animated Checkbox slider

Actual Result

No animation

Version

0.71.1

Testcase

https://codepen.io/andv/pen/YQmWJp?editors=0010

[levithomason]

The Checkbox uses ::before and ::after pseudo elements to create the slider track and handle. When changing the label, React creates a whole new DOM node. This new node has its own ::before and ::after pseudo elements. This is why they are no longer animated, there is no "starting" point for the new psuedo elements. The are created at the "on" position immediately.

I'm not sure this is fixable without some ugly hacks or a whole lot of work. We would have to get around the basis of React, replacing nodes when props/state change.

A Workaround

Not ideal, but one workaround is to update the label after the animation is complete:

https://codepen.io/levithomason/pen/JyPRXG

---

I'll leave this open for a bit and see if anyone has any smarter ideas than myself. PRs and engineering very much appreciated.

[overthemike]

Brand spankin' new here so please forgive my ignorance and lack of understanding of the codebase...that being said however...

What about simply adding a span around the text of the label? This way the pseudo elements will still be attached to the label element itself while the span element itself is what is changing.

I attempted to look into testing this out, however I'm going to definitely need to familiarize myself before giving that a shot. Seems to be created using factories, so this will affect other elements as well.

[layershifter]

I will close this for housekeeping. Issue really exists, however it a logical backgroud and I'm not sure that we responsive for its fix.

The easies way is use an wrapper element as @overthemike suggested:

<Checkbox
  checked={enabled}
  label={<label>{label}</label>}
  slider
/>

Working codepen