Improve panel toggle for hostnameinput

src/components/HostnameInput.jsx

@@ -11,6 +11,7 @@ class Component extends PureComponent {
   constructor(props) {
     super(props)
     this.state = {
+      overrideToggle: null,
       hostname: defaultHost
     }
   }
@@ -21,6 +22,14 @@ class Component extends PureComponent {
     this.props.discoveryStart(this.state.hostname)
   }
 
+  actTogglePanel = () => {
+    if (this.state.overrideToggle === null) {
+      this.setState({overrideToggle: !(this.props.expanded)})
+    } else {
+      this.setState({overrideToggle: !(this.state.overrideToggle === true)})
+    }
+  }
+
   updateHostfield(e) {
     // console.log("Updating hostname to ", e.target.value)
     this.setState({hostname: e.target.value})
@@ -59,9 +68,9 @@ class Component extends PureComponent {
         </div>
       )
     }
-    // console.error("-----", this.props)
+    let expanded = (this.state.overrideToggle !== null) ? this.state.overrideToggle : this.props.expanded
     return (
-      <Panel header="OAuth Service Discovery" eventKey="1" collapsible={true} defaultExpanded={this.props.expanded}>
+      <Panel onClick={this.actTogglePanel} header="OAuth Service Discovery" eventKey="1" collapsible={true} expanded={expanded}>
         <FormGroup
           className="gutter"
           controlId="formBasicText"