Updating toggle button component to disable Bootstrap toggling it. Cl…

…oses #1004

web-server/plugins/slycat-parameter-image/js/Components/ControlsButtonToggle.js

@@ -1,17 +1,20 @@
 import React from "react";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
-const ControlsButtonToggle = (props) => {
+export default class ControlsButtonToggle extends React.PureComponent {
+  render() {
     return (
-      <button data-toggle='button' 
-        className={`slycatControlsButtonToggle btn btn-sm ${props.button_style} ${props.active ? 'active' : 'notActive'}`}
-        id={props.id}
-        title={props.title} 
-        aria-pressed={props.active} 
-        onClick={props.set_active_state}>
-        <FontAwesomeIcon icon={props.icon} />
+      <button 
+        // Don't set data-toggle because it now causes Bootstrap to activate and deactivate the button 
+        // automatically, which interferes with React's toggling of attributes based on props.active.
+        // data-toggle='button' 
+        className={`slycatControlsButtonToggle btn btn-sm ${this.props.button_style} ${this.props.active ? 'active' : 'notActive'}`}
+        id={this.props.id}
+        title={this.props.title} 
+        aria-pressed={this.props.active} 
+        onClick={this.props.set_active_state}>
+        <FontAwesomeIcon icon={this.props.icon} />
       </button>
     );
-};
-
-export default ControlsButtonToggle
+  }
+}