From ed4277c543c552c4a0e29aba0e5a2d7d6ea4a3ea Mon Sep 17 00:00:00 2001
From: Stefan <sd.stefandunca@gmail.com>
Date: Thu, 10 Mar 2022 16:33:10 +0100
Subject: [PATCH] feat(StatusInput): add mode to ingnore unvalidated content

Add optional feature to StatusInput not to allow typing characters
that are not validated

updates #4961
---
 ui/StatusQ/sandbox/pages/StatusInputPage.qml    | 14 ++++++++++++++
 ui/StatusQ/src/StatusQ/Controls/StatusInput.qml | 17 ++++++++++++++++-
 .../StatusRegularExpressionValidator.qml        |  2 +-
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/ui/StatusQ/sandbox/pages/StatusInputPage.qml b/ui/StatusQ/sandbox/pages/StatusInputPage.qml
index 6c16f5aaa5..16f1699657 100644
--- a/ui/StatusQ/sandbox/pages/StatusInputPage.qml
+++ b/ui/StatusQ/sandbox/pages/StatusInputPage.qml
@@ -102,6 +102,20 @@ Column {
         ]
     }
 
+    StatusInput {
+        label: "Input with <i>StatusRegularExpressionValidator</i>"
+        charLimit: 30
+        input.placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
+        validationMode: StatusInput.ValidationMode.IgnoreInvalidInput
+
+        validators: [
+            StatusRegularExpressionValidator {
+                regularExpression: /^[0-9A-Za-z_\$-\s]*$/
+                errorMessage: "Bad input!"
+            }
+        ]
+    }
+
     StatusInput {
         label: "Label"
         input.placeholderText: "Input width component (right side)"
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml
index 2fe235d238..879949847a 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml
@@ -44,7 +44,8 @@ Item {
 
     enum ValidationMode {
         OnlyWhenDirty, // validates input only after it has become dirty
-        Always // validates input even before it has become dirty
+        Always, // validates input even before it has become dirty
+        IgnoreInvalidInput // ignore the new content if it doesn't match
     }
 
     property var errors: ({})
@@ -57,7 +58,9 @@ Item {
         root.errorMessage = ""
     }
 
+    property string _previousText: text
     function validate() {
+
         if (!statusBaseInput.dirty && validationMode === StatusInput.ValidationMode.OnlyWhenDirty) {
             return
         }
@@ -87,11 +90,23 @@ Item {
             if (errors){
                 let errs = Object.values(errors)
                 if (errs && errs[0]) {
+                    if(validationMode === StatusInput.ValidationMode.IgnoreInvalidInput
+                            && text.length > _previousText.length) {
+                        // Undo the last input
+                        const cursor = statusBaseInput.cursorPosition;
+                        statusBaseInput.text = _previousText;
+                        if (statusBaseInput.cursor > statusBaseInput.text.length) {
+                            statusBaseInput.cursorPosition = statusBaseInput.text.length;
+                        } else {
+                            statusBaseInput.cursorPosition = cursor-1;
+                        }
+                    }
                     errorMessage.text = errs[0].errorMessage || root.errorMessage;
                 } else {
                     errorMessage.text = ""
                 }
             }
+            _previousText = text
         }
 
         if (asyncValidators.length && !Object.values(errors).length) {
diff --git a/ui/StatusQ/src/StatusQ/Controls/Validators/StatusRegularExpressionValidator.qml b/ui/StatusQ/src/StatusQ/Controls/Validators/StatusRegularExpressionValidator.qml
index ec13751fd4..7017f66422 100644
--- a/ui/StatusQ/src/StatusQ/Controls/Validators/StatusRegularExpressionValidator.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/Validators/StatusRegularExpressionValidator.qml
@@ -50,7 +50,7 @@ StatusValidator {
     property var regularExpression
 
     name: "regex"
-    errorMessage: "Please enter a valid regular expression."
+    errorMessage: `Must match regex(${validatorObj.regularExpression.toString()})`
     validatorObj: RegularExpressionValidator { regularExpression: root.regularExpression }
 
     validate: function (value) {