more sidebox cleanup

src/components/AssignmentTexter/Toolbar.jsx

@@ -204,27 +204,41 @@ const ContactToolbar = function ContactToolbar(props) {
         <div className={css(styles.grow)}></div>
         <div className={css(styles.navigation)} style={{ flexBasis: "130px" }}>
           <Tooltip title="Previous Contact">
-            <IconButton
-              onClick={navigationToolbarChildren.onPrevious}
-              disabled={!navigationToolbarChildren.onPrevious}
-              className={css(styles.contactToolbarIconButton)}
-              style={{ flex: "0 0 56px", width: "45px" }}
-            >
-              <ArrowBackIcon htmlColor="white" />
-            </IconButton>
+            {/*
+             *  Tooltips can not wrap buttons that are disabled.
+             *  A disabled element does not fire events.
+             *  Tooltip needs to listen to the child element's events to display the title.
+             */}
+            <span>
+              <IconButton
+                onClick={navigationToolbarChildren.onPrevious}
+                disabled={!navigationToolbarChildren.onPrevious}
+                className={css(styles.contactToolbarIconButton)}
+                style={{ flex: "0 0 56px", width: "45px" }}
+              >
+                <ArrowBackIcon htmlColor="white" />
+              </IconButton>
+            </span>
           </Tooltip>
           <div className={css(styles.navigationTitle)}>
             {navigationToolbarChildren.title}
           </div>
           <Tooltip title="Next Contact">
-            <IconButton
-              onClick={navigationToolbarChildren.onNext}
-              disabled={!navigationToolbarChildren.onNext}
-              className={css(styles.contactToolbarIconButton)}
-              style={{ flex: "0 0 56px", width: "45px" }}
-            >
-              <ArrowForwardIcon htmlColor="white" />
-            </IconButton>
+            {/*
+             *  Tooltips can not wrap buttons that are disabled.
+             *  A disabled element does not fire events.
+             *  Tooltip needs to listen to the child element's events to display the title.
+             */}
+            <span>
+              <IconButton
+                onClick={navigationToolbarChildren.onNext}
+                disabled={!navigationToolbarChildren.onNext}
+                className={css(styles.contactToolbarIconButton)}
+                style={{ flex: "0 0 56px", width: "45px" }}
+              >
+                <ArrowForwardIcon htmlColor="white" />
+              </IconButton>
+            </span>
           </Tooltip>
         </div>
       </Toolbar>

src/components/OrganizationFeatureSettings.jsx

@@ -40,7 +40,7 @@ const configurableFields = {
     component: props => {
       // maybe show the list and then validate
       return (
-        <div>
+        <div key={props.key}>
           <Form.Field
             as={GSTextField}
             label="Action Handlers (comma-separated)"
@@ -68,7 +68,7 @@ const configurableFields = {
         return null;
       }
       return (
-        <div>
+        <div key={props.key}>
           <FormControlLabel
             control={
               <Switch
@@ -118,7 +118,7 @@ const configurableFields = {
     ready: true,
     component: props => {
       return (
-        <div>
+        <div key={props.key}>
           <Form.Field
             as={GSTextField}
             label="Default Batch Size"
@@ -138,7 +138,7 @@ const configurableFields = {
     ready: true,
     component: props => {
       return (
-        <div>
+        <div key={props.key}>
           <Form.Field
             as={GSTextField}
             label="Default Response Window"
@@ -164,7 +164,7 @@ const configurableFields = {
     ready: true,
     component: props => {
       return (
-        <div>
+        <div key={props.key}>
           <Form.Field
             as={GSTextField}
             label="Maximum Number of Contacts per-texter"
@@ -194,7 +194,7 @@ const configurableFields = {
     ready: true,
     component: props => {
       return (
-        <div>
+        <div key={props.key}>
           <Form.Field
             as={GSTextField}
             label="Max Message Length"
@@ -254,7 +254,11 @@ export default class OrganizationFeatureSettings extends React.Component {
           ...this.props,
           ...this.state
         });
-        return configurableFields[f].component({ ...this.props, parent: this });
+        return configurableFields[f].component({
+          key: f,
+          ...this.props,
+          parent: this
+        });
       });
     return (
       <div>