From f06666917e3dcd0c46b2f121e97e40691add5c3c Mon Sep 17 00:00:00 2001
From: codermarcos <coder.marcos@gmail.com>
Date: Sun, 28 Jan 2024 00:55:41 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix=20readonly=20inputs=20On=20b?=
 =?UTF-8?q?ranch=20fix/#63/readonly-inputs=20Changes=20to=20be=20committed?=
 =?UTF-8?q?:=20=09modified:=20=20=20cypress/e2e/v4.x.x/set-mask.cy.ts=20?=
 =?UTF-8?q?=09modified:=20=20=20cypress/file/index.html=20=09modified:=20?=
 =?UTF-8?q?=20=20src/set-mask.ts=20=09modified:=20=20=20tests/set-mask.tes?=
 =?UTF-8?q?t.ts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cypress/e2e/v4.x.x/set-mask.cy.ts | 81 ++++++++++++++++++++++++++++++-
 cypress/file/index.html           |  7 ++-
 src/set-mask.ts                   |  6 ++-
 tests/set-mask.test.ts            | 34 +++++++++++++
 4 files changed, 124 insertions(+), 4 deletions(-)

diff --git a/cypress/e2e/v4.x.x/set-mask.cy.ts b/cypress/e2e/v4.x.x/set-mask.cy.ts
index 78f3421..d7abe4c 100644
--- a/cypress/e2e/v4.x.x/set-mask.cy.ts
+++ b/cypress/e2e/v4.x.x/set-mask.cy.ts
@@ -2,16 +2,95 @@
 
 import type { SimpleMaskMoneyConfiguration } from '../../../src/types';
 
-const getUrl = (configuration: Partial<SimpleMaskMoneyConfiguration>, initalValue?: string) => {
+const getUrl = (configuration: Partial<SimpleMaskMoneyConfiguration>, initalValue?: string, attr?: Array<string>) => {
   const options = new Array<string>();
 
   Object.keys(configuration).forEach((key) => options.push(`${key}=${encodeURIComponent(configuration[key])}`));
 
   if (initalValue) options.push(`initialValue=${initalValue}`);
+  if (attr) options.push(`attributes=${attr.join(',')}`);
 
   return `./cypress/file/?${options.join('&')}`;
 };
 
+
+describe(
+  'input behaviour',
+  () => {
+    describe(
+      'readonly',
+      () => {
+
+        beforeEach(
+          () => {
+            cy.visit(getUrl({ prefix: '$', suffix: 'CAD' }, '6.66', ['readonly']));
+            cy.reload();
+          }
+        );
+    
+        it(
+          'should format when input was created',
+          () => {
+            cy.get('input').should('have.value', '$6,66CAD');
+          }
+        );
+    
+        it(
+          'shouldn\'t allow type when is readonly',
+          (done) => {
+            const prevent = async (error) => {
+              const passed = error.message.includes('readonly');
+              cy.off('fail', prevent);
+              if (passed) done();
+              return !passed;
+            };
+
+            cy.on('fail', prevent);
+            cy.get('input').type('123', { timeout: 100 });
+          }
+        );
+      }
+    );
+
+    describe(
+      'readonly',
+      () => {
+
+        beforeEach(
+          () => {
+            cy.visit(getUrl({ prefix: '$', suffix: 'CAD' }, '6.66', ['disabled']));
+            cy.reload();
+          }
+        );
+    
+        it(
+          'should format when input was created',
+          () => {
+            cy.get('input').should('have.value', '$6,66CAD');
+          }
+        );
+    
+        it(
+          'shouldn\'t allow type when is disabled',
+          (done) => {
+            const prevent = async (error) => {
+              const passed = error.message.includes('disabled');
+              cy.off('fail', prevent);
+              if (passed) done();
+              return !passed;
+            };
+
+            cy.on('fail', prevent);
+            
+            cy.get('input').type('123', { timeout: 100 });
+          }
+        );
+      }
+    );
+
+  }
+);
+
 describe(
   'cursor',
   () => {
diff --git a/cypress/file/index.html b/cypress/file/index.html
index 5a2330d..1daa5df 100644
--- a/cypress/file/index.html
+++ b/cypress/file/index.html
@@ -14,7 +14,9 @@
 
   <script src="/lib/simple-mask-money.umd.js"></script>
 
-  <input type="text" />
+  <form>
+    <input type="text" />
+  </form>
 
   <script>
     const options = {};
@@ -50,6 +52,9 @@
 
     if (q.has('initialValue'))
       document.querySelector('input').value = q.get('initialValue');
+    
+    if (q.has('attributes'))
+      q.get('attributes').split(',').forEach(prop => document.querySelector('input').setAttribute(prop, ''));
 
     const removeMask = SimpleMaskMoney.setMask('input', options);
   </script>
diff --git a/src/set-mask.ts b/src/set-mask.ts
index 04263ce..92eb2c2 100644
--- a/src/set-mask.ts
+++ b/src/set-mask.ts
@@ -306,11 +306,13 @@ function setMask(
     setCaretPosition(position);
   };
 
+  triggerInputChanges(initialValue);
+
+  if (element.hasAttribute('readonly') || element.hasAttribute('disabled')) return () => void 0;
+
   element.addEventListener('keydown', onKeyDown);
   document.addEventListener('selectionchange', onSelectionChange);
 
-  triggerInputChanges(initialValue);
-
   const removeMask = (): void => {
     element.removeEventListener('keydown', onKeyDown);
     document.removeEventListener('selectionchange', onSelectionChange);
diff --git a/tests/set-mask.test.ts b/tests/set-mask.test.ts
index 893f51c..f0e2c98 100644
--- a/tests/set-mask.test.ts
+++ b/tests/set-mask.test.ts
@@ -235,6 +235,40 @@ describe(
       }
     );
 
+    describe(
+      'shouldn\'t write when is readonly or disabled',
+      () => {
+        it(
+          'should format when apply mask and not allow write when is readonly', 
+          () => {
+            input.value = '0,50';
+            input.setAttribute('readonly', '');
+
+            clear = setMask(input, { prefix: 'R$', suffix: 'BRL' });
+    
+            write('69');
+    
+            expect(input.value).toBe('R$0,50BRL');
+          },
+        );
+        
+        it(
+          'should format when apply mask and not allow write when is disabled', 
+          () => {
+            input.value = '0,50';
+            input.setAttribute('disabled', '');
+
+            clear = setMask(input, { prefix: 'R$', suffix: 'BRL' });
+    
+            write('69');
+    
+            expect(input.value).toBe('R$0,50BRL');
+          },
+        );
+      }
+    );
+
+
     // Only basic tests because jsdom doesn't work to simulate user actions
     // Real tests at cypress
     describe(