[#38: Enhance new repertory release available notification - partial] [Added FocusTrap to modals]

src/containers/Configuration/Configuration.js

@@ -163,6 +163,8 @@ class Configuration extends IPCContainer {
         ObjectLookup: objectLookup,
         OriginalItemList: itemListCopy,
         OriginalObjectLookup: objectLookupCopy,
+      }, () => {
+
       });
     } else {
       this.props.notifyError(arg.data.Error);
@@ -262,20 +264,7 @@ class Configuration extends IPCContainer {
       );
     }
 
-    const configurationItems = this.state.ItemList
-      .map((k, i) => {
-        return (
-          ((!this.state.IsRemoteMount || !k.hide_remote) && (!k.advanced || (this.state.ShowAdvanced && k.advanced))) ?
-            <ConfigurationItem advanced={k.advanced}
-                               changed={e=>this.handleItemChanged(e, i)}
-                               grouping={'Settings'}
-                               items={this.state.Template[k.label].items}
-                               key={i}
-                               label={k.label}
-                               template={this.state.Template[k.label]}
-                               value={k.value}/> :
-            null)
-      });
+    let autoFocus = true;
 
     let objectItems = [];
     for (const key of Object.keys(this.state.ObjectLookup)) {
@@ -285,9 +274,12 @@ class Configuration extends IPCContainer {
           <div>
             {
               this.state.ObjectLookup[key].map((k, i) => {
+                const shouldFocus = autoFocus;
+                autoFocus = false;
                 return (
                   (!k.advanced || (this.state.ShowAdvanced && k.advanced && !k.remote) || this.showRemoteConfigItem(k, this.state.ObjectLookup[key])) ?
                     <ConfigurationItem advanced={k.advanced}
+                                       autoFocus={shouldFocus}
                                        changed={e=>this.handleObjectItemChanged(e, key, i)}
                                        grouping={key}
                                        items={this.state.Template[key].template[k.label].items}
@@ -304,13 +296,33 @@ class Configuration extends IPCContainer {
       ));
     }
 
+    const configurationItems = this.state.ItemList
+      .map((k, i) => {
+        const shouldFocus = autoFocus;
+        autoFocus = false;
+        return (
+          ((!this.state.IsRemoteMount || !k.hide_remote) && (!k.advanced || (this.state.ShowAdvanced && k.advanced))) ?
+            <ConfigurationItem advanced={k.advanced}
+                               autoFocus={shouldFocus}
+                               changed={e=>this.handleItemChanged(e, i)}
+                               grouping={'Settings'}
+                               items={this.state.Template[k.label].items}
+                               key={i}
+                               label={k.label}
+                               template={this.state.Template[k.label]}
+                               value={k.value}/> :
+            null
+        );
+      });
+
     return (
       <div className={'Configuration'}>
         {confirmSave}
         <Box dxDark dxStyle={{padding: 'var(--default_spacing)'}}>
           <div style={{float: 'right', margin: 0, padding: 0, marginTop: '-4px', boxSizing: 'border-box', display: 'block'}}>
-            <b style={{cursor: 'pointer'}}
-               onClick={this.checkSaveRequired}>X</b>
+            <a href={'#'}
+               onClick={this.checkSaveRequired}
+               style={{cursor: 'pointer'}}>X</a>
           </div>
           <h1 style={{width: '100%', textAlign: 'center'}}>{(
             this.props.DisplayRemoteConfiguration ?

src/containers/Configuration/ConfigurationItem/ConfigurationItem.js

@@ -18,7 +18,7 @@ export default connect(null, mapDispatchToProps)(props => {
   const handleChanged = (e) => {
     const target = e.target;
     if (target.type === 'checkbox') {
-      target.value = e.target.checked ? "true" : "false";
+      target.value = e.target.checked ? 'true' : 'false';
     }
     props.changed(target);
   };
@@ -30,49 +30,54 @@ export default connect(null, mapDispatchToProps)(props => {
       props.notifyInfo(props.label, description);
     };
 
-    infoDisplay = <a href={void(0)}
-                  className={'ConfigurationInfo'}
-                  onClick={()=>{displayInfo(); return false;}}><FontAwesomeIcon icon={faInfoCircle}/></a>;
+    infoDisplay = <a href={'#'}
+                     className={'ConfigurationInfo'}
+                     onClick={()=>{displayInfo(); return false;}}><FontAwesomeIcon icon={faInfoCircle}/></a>;
   }
-  
+
   let data;
   switch (props.template.type) {
-    case "bool":
+    case 'bool':
       data = <CheckBox changed={handleChanged}
                        checked={props.value}
-                       disabled={props.readOnly}/>;
+                       disabled={props.readOnly}
+                       autoFocus={props.autoFocus}/>;
     break;
 
-    case "double":
+    case 'double':
       data = <input min={0.0}
+                    autoFocus={props.autoFocus}
                     disabled={props.readOnly}
                     onChange={e=>handleChanged(e)}
-                    step={"0.01"}
+                    step={'0.01'}
                     className={'ConfigurationItemInput'}
                     type={'number'}
                     value={parseFloat(props.value).toFixed(2)}/>;
     break;
 
-    case "list":
+    case 'list':
       data = <DropDown alt
                        auto
+                       autoFocus={props.autoFocus}
                        changed={handleChanged}
                        disabled={props.readOnly}
                        items={props.items}
                        selected={props.value} />;
     break;
 
-    case "string":
+    case 'string':
       data = <input onChange={e=>handleChanged(e)}
+                    autoFocus={props.autoFocus}
                     className={'ConfigurationItemInput'}
                     disabled={props.readOnly}
                     type={'text'}
                     value={props.value}/>;
     break;
 
-    case "uint8":
+    case 'uint8':
       data = <input max={255}
                     min={0}
+                    autoFocus={props.autoFocus}
                     disabled={props.readOnly}
                     onChange={e=>handleChanged(e)}
                     className={'ConfigurationItemInput'}
@@ -80,9 +85,10 @@ export default connect(null, mapDispatchToProps)(props => {
                     value={props.value}/>;
     break;
 
-    case "uint16":
+    case 'uint16':
       data = <input max={65535}
                     min={0}
+                    autoFocus={props.autoFocus}
                     disabled={props.readOnly}
                     onChange={e=>handleChanged(e)}
                     className={'ConfigurationItemInput'}
@@ -90,9 +96,10 @@ export default connect(null, mapDispatchToProps)(props => {
                     value={props.value}/>;
     break;
 
-    case "uint32":
+    case 'uint32':
       data = <input max={4294967295}
                     min={0}
+                    autoFocus={props.autoFocus}
                     disabled={props.readOnly}
                     onChange={e=>handleChanged(e)}
                     className={'ConfigurationItemInput'}
@@ -100,9 +107,10 @@ export default connect(null, mapDispatchToProps)(props => {
                     value={props.value}/>;
     break;
 
-    case "uint64":
+    case 'uint64':
       data = <input max={18446744073709551615}
                     min={0}
+                    autoFocus={props.autoFocus}
                     disabled={props.readOnly}
                     onChange={e=>handleChanged(e)}
                     className={'ConfigurationItemInput'}
@@ -129,4 +137,4 @@ export default connect(null, mapDispatchToProps)(props => {
       </table>
     </div>
   );
-});
+});

src/containers/MountItems/MountItem/MountItem.js

@@ -152,8 +152,8 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
       }
     };
     removeControl = (
-      <a col={dimensions=>dimensions.columns - 6}
-         href={void(0)}
+      <a href={'#'}
+         col={dimensions=>dimensions.columns - 6}
          onClick={handleRemoveMount}
          row={secondRow + 3}
          style={removeStyle}>