pick pull request #57, fixes #56; Release v2.4.0

changhuixu · Sep 7, 2021 · b3d8966 · b3d8966
1 parent 959a4f5
commit b3d8966
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -17,6 +17,8 @@
 
 ## CHANGELOG
 
+- **v2.4.0**: `digitOnly` directive now supports disabling paste events (merges a pull request [#57](/../../pull/49), fixes [#56](/../../issues/56)).
+
 - **v2.3.0**: `digitOnly` directive now supports negative values (merges a pull request [#49](/../../pull/49)).
 
 - **v2.2.3**: fix an issue ([#50](/../../issues/50)) in the `mask` directive: support dynamic pattern attribute binding.

diff --git a/cypress/integration/clipboard-events.spec.ts b/cypress/integration/clipboard-events.spec.ts
@@ -135,7 +135,7 @@ describe('Copy & Paste', () => {
     cy.get('#digit-only-decimal').clear();
   });
 
-  it.only('s', ()=> {
+  it('should allow only one decimal place in a decimal input element', () => {
     const dt = new DataTransfer();
     dt.setData('text/plain', 'abc1.0s.1');
     const pasteEvent = new ClipboardEvent('paste', {
@@ -264,4 +264,23 @@ describe('Copy & Paste', () => {
 
     cy.get('#decimal-number').clear();
   });
+
+  it('should disable paste when [allowPaste] is false', () => {
+    const dt = new DataTransfer();
+    dt.setData('text/plain', 'a-123');
+    const pasteEvent = new ClipboardEvent('paste', {
+      clipboardData: dt,
+      bubbles: true,
+      cancelable: true,
+    });
+
+    cy.get('#digit-only-disable-paste').clear();
+
+    cy.get('#digit-only-disable-paste').then(($el) => {
+      $el[0].dispatchEvent(pasteEvent);
+      cy.get('#digit-only-disable-paste').should('have.value', '');
+    });
+
+    cy.get('#digit-only-disable-paste').clear();
+  });
 });
diff --git a/projects/uiowa/digit-only/README.md b/projects/uiowa/digit-only/README.md
@@ -17,6 +17,8 @@
 
 ## CHANGELOG
 
+- **v2.4.0**: `digitOnly` directive now supports disabling paste events (merges a pull request [#57](/../../pull/49), fixes [#56](/../../issues/56)).
+
 - **v2.3.0**: `digitOnly` directive now supports negative values (merges a pull request [#49](/../../pull/49)).
 
 - **v2.2.3**: fix an issue ([#50](/../../issues/50)) in the `mask` directive: support dynamic pattern attribute binding.

diff --git a/projects/uiowa/digit-only/package.json b/projects/uiowa/digit-only/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uiowa/digit-only",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "author": "Changhui Xu <[email protected]>",
   "description": "This package includes two Angular directives. The digitOnly directive only allows numbers in the input box when typing, pasting or drag/dropping. The mask directive checks the input pattern attribute.",
   "keywords": [

diff --git a/projects/uiowa/digit-only/src/lib/digit-only.directive.ts b/projects/uiowa/digit-only/src/lib/digit-only.directive.ts
@@ -31,6 +31,7 @@ export class DigitOnlyDirective implements OnChanges {
   @Input() decimal = false;
   @Input() decimalSeparator = '.';
   @Input() allowNegatives= false;
+  @Input() allowPaste = true;
   @Input() negativeSign = '-';
   @Input() min = -Infinity;
   @Input() max = Infinity;
@@ -132,21 +133,29 @@ export class DigitOnlyDirective implements OnChanges {
       e.preventDefault();
     }
   }
-
+  
   @HostListener('paste', ['$event'])
   onPaste(event: any): void {
-    let pastedInput: string;
-    if (window['clipboardData']) {
-      // Browser is IE
-      pastedInput = window['clipboardData'].getData('text');
-    } else if (event.clipboardData && event.clipboardData.getData) {
-      // Other browsers
-      pastedInput = event.clipboardData.getData('text/plain');
-    }
+    if (this.allowPaste === true) {
+      let pastedInput: string = '';
+      if ((window as { [key: string]: any })['clipboardData']) {
+        // Browser is IE
+        pastedInput = (window as { [key: string]: any })['clipboardData'].getData(
+          'text'
+        );
+      } else if (event.clipboardData && event.clipboardData.getData) {
+        // Other browsers
+        pastedInput = event.clipboardData.getData('text/plain');
+      }
 
-    this.pasteData(pastedInput);
-    event.preventDefault();
+      this.pasteData(pastedInput);
+      event.preventDefault();
+    } else {  // this prevents the paste 
+      event.preventDefault();
+      event.stopPropagation();
+    }
   }
+
 
   @HostListener('drop', ['$event'])
   onDrop(event: DragEvent): void {

diff --git a/src/app/digit-only-demos/digit-only-demos.component.html b/src/app/digit-only-demos/digit-only-demos.component.html
@@ -16,9 +16,17 @@ <h3><code>digitOnly</code> directive</h3>
       placeholder="000"
       maxlength="3"
     />
-
-    <label for="negative-digit-only">Digit Only input box that can be negative</label>
-    <input id="negative-digit-only" type="text" digitOnly [allowNegatives]="true" placeholder="-123"/>
+
+    <label for="negative-digit-only">
+      Digit Only input box that can be negative
+    </label>
+    <input
+      id="negative-digit-only"
+      type="text"
+      digitOnly
+      [allowNegatives]="true"
+      placeholder="-123"
+    />
   </section>
 
   <section>
@@ -100,7 +108,7 @@ <h3><code>pattern</code></h3>
       [(ngModel)]="pattern"
       name="change-pattern"
       placeholder="Type your pattern"
-      style="margin-left: 0.5rem;"
+      style="margin-left: 0.5rem"
     />
 
     <label for="currency">
@@ -185,4 +193,18 @@ <h3>regular text input</h3>
       placeholder="000"
     />
   </section>
+
+  <section>
+    <h3><code>digitOnly</code> directive</h3>
+    <label for="digit-only-disable-paste">
+      Digit Only input box (disable paste)
+    </label>
+    <input
+      id="digit-only-disable-paste"
+      type="text"
+      digitOnly
+      [allowPaste]="false"
+      placeholder="00000"
+    />
+  </section>
 </div>