diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/DegreeInputmask.js b/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/DegreeInputmask.js
index 66ac10063cc619e3ad4489a96eb10c1f32a16d0e..16e5057bdf3629ec5b66dfc2f7dd33a3b5edb058 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/DegreeInputmask.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/DegreeInputmask.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { InputMask } from 'primereact/inputmask';
 import Validator from  '../../utils/validator';
+import Cleave from 'cleave.js/react';
 
 const BG_COLOR= '#f878788f';
 
@@ -16,29 +17,31 @@ export default class DegreeInputMask extends Component {
    */
   callbackUpdateAngle(e) {
     let isValid = false;
-    if(Validator.validateAngle(e.value)){
-      e.originalEvent.target.style.backgroundColor = '';
+    if (Validator.validateAngle(e.target.value)) {
+      e.target.style.backgroundColor = '';
       isValid = true;
-    }else{
-      e.originalEvent.target.style.backgroundColor = BG_COLOR;
+    } else  {
+      e.target.style.backgroundColor = BG_COLOR;
     }
     this.props.context.componentParent.updateAngle(
-      this.props.node.rowIndex,this.props.colDef.field,e.value,false,isValid
+      this.props.node.rowIndex,this.props.colDef.field,e.target.value,false,isValid
     );
   }
 
-  afterGuiAttached(){
-    this.input.input.focus();
+  afterGuiAttached() {
+    this.input.focus();
+    this.input.select();
   }
 
   render() {
     return (
-      <InputMask mask="99:99:99.9999" value={this.props.value}
-        placeholder="DD:mm:ss.ssss" 
-        className="inputmask"
-        onChange={this.callbackUpdateAngle}
-        autoFocus
-        ref={input =>{this.input = input}} />
+      <Cleave placeholder="DD:mm:ss.ssss" value={this.props.value}
+          options={{numericOnly: true, blocks: [2, 2, 2, 4],
+                    delimiters: [':', ':', '.'],
+                    delimiterLazyShow: false}}
+          className="inputmask" 
+          htmlRef={(ref) => this.input = ref }
+          onChange={this.callbackUpdateAngle} />
     );
   }
 }
\ No newline at end of file
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/TimeInputmask.js b/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/TimeInputmask.js
index 3b80b7a82e759e61c4a31e4f075bf678fbf6e0e2..540f276baf86e6eb9a36a81823a1feef14583fa1 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/TimeInputmask.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/TimeInputmask.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { InputMask } from 'primereact/inputmask';
 import Validator from  '../../utils/validator';
+import Cleave from 'cleave.js/react';
 
 const BG_COLOR= '#f878788f';
 
@@ -12,33 +13,33 @@ export default class TimeInputMask extends Component {
 
   callbackUpdateAngle(e) {
     let isValid = false;
-    if(Validator.validateTime(e.value)){
-      e.originalEvent.target.style.backgroundColor = '';
+    if (Validator.validateTime(e.target.value)) {
+      e.target.style.backgroundColor = '';
       isValid = true;
-    }else{
-      e.originalEvent.target.style.backgroundColor = BG_COLOR;
+    } else {
+      e.target.style.backgroundColor = BG_COLOR;
     }
-    
+    e.target.style.border = "none";
     this.props.context.componentParent.updateAngle(
-      this.props.node.rowIndex,this.props.colDef.field,e.value,false,isValid
+      this.props.node.rowIndex,this.props.colDef.field,e.target.value,false,isValid
     );
     
   }
  
   afterGuiAttached(){
-    this.input.input.focus();
+    this.input.focus();
+    this.input.select();
   }
- 
+
   render() {
     return (
-        <InputMask 
-          value={this.props.value}
-          mask="99:99:99.9999"
-          placeholder="HH:mm:ss.ssss"
+      <Cleave placeholder="HH:mm:ss.ssss" value={this.props.value}
+          options={{numericOnly: true, blocks: [2, 2, 2, 4],
+                    delimiters: [':', ':', '.'],
+                    delimiterLazyShow: false}}
           className="inputmask" 
-          onChange={this.callbackUpdateAngle}
-          ref={input =>{this.input = input}}
-         />
+          htmlRef={(ref) => this.input = ref }
+          onChange={this.callbackUpdateAngle} />
     );
   }
 }
\ No newline at end of file
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/utils/unit.converter.js b/SAS/TMSS/frontend/tmss_webapp/src/utils/unit.converter.js
index 32ca7186a73be42d3a4580504da1d75c8edc1ea6..471818ef7f1c3915101b6a85d2fe48d34151aa8b 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/utils/unit.converter.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/utils/unit.converter.js
@@ -92,7 +92,7 @@ const UnitConverter = {
     getAngleOutput(prpOutput, isDegree) {
         if(prpOutput){
             const splitOutput = prpOutput.split(':');
-            const seconds = splitOutput[2]?splitOutput[2].split('.')[0].split('.')[0]:splitOutput[2];
+            const seconds = splitOutput[2]?splitOutput[2].split('.')[0]:splitOutput[2];
             let milliSeconds = prpOutput.split('.')[1] || '0000';
             milliSeconds = milliSeconds.padEnd(4,0);
             if (isDegree) {
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/utils/validator.js b/SAS/TMSS/frontend/tmss_webapp/src/utils/validator.js
index 4f4b1b2aba5f259397cbb792d8a9d464433b8946..c3101bd69b608c704590586f43a646974ee29858 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/utils/validator.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/utils/validator.js
@@ -1,7 +1,7 @@
 const Validator = {
     validateTime(value) {
-    const splitOutput = value.split(':');
-    const seconds = splitOutput[2]?splitOutput[2].split('.')[0].split('.')[0]:splitOutput[2];
+        const splitOutput = value.split(':');
+        const seconds = splitOutput[2]?splitOutput[2].split('.')[0]:splitOutput[2];
         let milliSeconds = value.split('.')[1] || '0000';
         milliSeconds = milliSeconds.padEnd(4,0);
         if (splitOutput.length < 3) {
@@ -19,7 +19,7 @@ const Validator = {
     },
     validateAngle(value) {
         const splitOutput = value.split(':');
-        const seconds = splitOutput[2]?splitOutput[2].split('.')[0].split('.')[0]:splitOutput[2];
+        const seconds = splitOutput[2]?splitOutput[2].split('.')[0]:splitOutput[2];
         let milliSeconds = value.split('.')[1] || '0000';
         milliSeconds = milliSeconds.padEnd(4,0);
         if (splitOutput.length < 3) {