Click doesn't toggle switch, only dragging works

I’m attaching a gif showing the behavior. When I click on the switch it doesn’t do anything at all. It can only be toggled by dragging it and even then the animation makes a jump. https://gfycat.com/VagueNeglectedBonobo

I’m using React 16.8.1 and react-switch 4.0.1 in a create-react-app project where I manually updated React. Here’s how I’m using the switch:

<Switch
          onChange={checked => console.log(checked)}
          width={112}
          height={45}
          onColor={colorPalette.primary}
          offColor={colorPalette.gray}
          offHandleColor={colorPalette.dark}
          handleDiameter={30}
          uncheckedIcon={false}
          checkedIcon={false}
          checked={isRunning}
          onColor="#2e91e9"
          id="normal-switch"
  />

What could be causing the behavior?

[oquirozm]

@markusenglund got it, solved it. I think we can close the issue.

@superzadeh I have no idea how you could work around this, sorry.

[superzadeh]

Yeah, I ended up rolling my own component; slightly more limited in functionality but at least it works in the iframe.

A nice update for this project would be to allow passing a custom window/callback to get the window object;

import ReactDOM from "react-dom";
import React, { Component } from "react";
import Switch from "react-switch";
import Frame, { FrameContextConsumer } from "react-frame-component";

class SwitchExample extends Component {
  constructor() {
    super();
    this.state = { checked: false };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(checked) {
    this.setState({ checked });
  }

  render() {
    return (
      <Frame>
        <FrameContextConsumer>
          {// Callback is invoked with iframe's window and document instances
          (frameContext) => {
            // Render Children
            return (
              <div>
                <p>Switch with default style</p>
                <Switch
                  window={frameContext.window}
                  onChange={this.handleChange}
                  checked={this.state.checked}
                />
              </div>
            );
          }}
        </FrameContextConsumer>
      </Frame>
    );
  }
}

ReactDOM.render(<SwitchExample />, document.getElementById("root"));