Copy and Paste support for KeyFilter

[vpnocsen]

I used keyfilter component for my number input field but can not handle in the case user copy and paste a string inside? Is there the way to handle copy and paste action to check the correct input data, like an event fired for ex ?

[cagataycivici]

Not sure, it throws validation error in validate mode though.

[digaus]

@HostListener('paste', ['$event']) checkPaste(e: KeyboardEvent) {
    ...
  }

Why not listen to the paste Event?

[JacobSiegle]

Old issue that was probably fixed at some point but seems to have broken again. I get this issue migrating from primeng 6.1.5 to 7.1.0-rc.1. Copy and paste into a key filter for numbers previously worked.

[ghost]

I'm not able to paste invalid test in when using pValidateOnly. IMO, this code should quit early if pValidateOnly so the application can appropriately handle in invalid pasted text.

@HostListener('paste', ['$event'])
   onPaste(e) {
       const clipboardData = e.clipboardData || (<any>window).clipboardData.getData('text');
       if (clipboardData) {
           const pastedText = clipboardData;
           if (!this.regex.test(pastedText)) {
               e.preventDefault();
           }
       }
   }

[JACrazy]

So this is the current version of the code:

@HostListener('paste', ['$event'])
    onPaste(e) {
        const clipboardData = e.clipboardData || (<any>window).clipboardData.getData('text');
        if (clipboardData) {
            const pastedText = clipboardData;
            if (!this.regex.test(pastedText)) {
                e.preventDefault();
            }
        }
    }

There's two problems with this implementation: It is not actually comparing the text and it is only finding the existence of one value within the whole string. This leads to two issues, pasting in integer fields does not work at all and this allows for pasting characters that dont belong (special characters or numbers) into fields set to alpha or alphanumeric.

1. In Chrome e.clipboardData returns as an object so pastedText is being read as an object and the regex is testing that. Therefore, it is not even testing against the pasted string, this is why pasting into integers field doesnt work at all.

To fix this we can do:

const clipboardData = e.clipboardData|| (<any>window).clipboardData;
        if (clipboardData) {
            const pastedText = clipboardData.getData('text');
            if (!this.regex.test(pastedText)) {
                e.preventDefault();
            }
        }

2. this.regex.test(pastedText)
   This type of test against the regex returns true as long as one character within the whole string is valid. Therefore pasting a string with a legit character plus a special character would work. Ex: 'abc!@def'
   There's different ways to do this here's one approach:

     let regex = new RegExp('^'+this.regex.source +'+$',this.regex.flags)
     if (!regex.test(pastedText)) {
         e.preventDefault();
     }

After making both those changes, the paste function will work as expected.

Full code after changes:

@HostListener('paste', ['$event'])
    onPaste(e) {
        const clipboardData = e.clipboardData || (<any>window).clipboardData;
        if (clipboardData) {
            const pastedText = clipboardData.getData('text');        
            const regex = new RegExp('^'+this.regex.source +'+$',this.regex.flags)
            if (!regex.test(pastedText)) {
                e.preventDefault();
            }
        }
    }

[rahulbanthia]

I think this should be the correct solution @JACrazy, I removed this. from the testing Regex object.

@HostListener('paste', ['$event'])
onPaste(e) {
const clipboardData = e.clipboardData || (<any>window).clipboardData;
if (clipboardData) {
const pastedText = clipboardData.getData('text');
const regex = new RegExp('^'+this.regex.source +'+$',this.regex.flags)
if (!regex.test(pastedText)) {
e.preventDefault();
}
}
}

[JACrazy]

@cagataycivici I've been pushing for a while, this issue still exists. The fix done for #7729 does not fix validations done on the pasted text. It allows text to be pasted but the problem with the way regex testing is being done, allows for strings to be pasted into integer only fields as long as one character in the string is a number.

See this example from https://www.primefaces.org/primeng/#/keyfilter

[oxaoo]

This issue still actual. 😔

PrimeNG version: 9.0.6
Angular version: 9.1.4
Browser: Opera 68.0.3618.63

The code fragment to reproduce:

<input pInputText type="text" name="username" id="username" #username="ngModel"
       [(ngModel)]="user.username"
       [pKeyFilter]="regex.USERNAME" [pValidateOnly]="true" autofocus required/>

public static USERNAME: RegExp = new RegExp(/^[a-z0-9][a-z0-9.\-_]{2,18}[a-z0-9]$/)

[JACrazy]

Looks like they finally fixed this in 9.1.0.

aa9a6fb

They went for a different approach which is to go through each character one by one and verify rather than doing one regex test over the whole text.

            for (let char of pastedText.toString()) {
                if (!this.regex.test(char)) {
                    e.preventDefault();
                    return;
                }
            }

[flawesomesoft]

I'm still not able to paste any values for a regex keyFilter.

Just refer to the following example using regex for filtering of an IP address:
https://stackblitz.com/edit/github-a94aqp-xcqam8?file=src/app/app.component.html

When trying to paste any valid value like "127.0.0.1" nothing happens at all.

Btw. you can also take a look at the official primeNG page for keyFilter:
https://www.primefaces.org/primeng/keyfilter
When trying to paste anything in the field for the credit card (validation mode) nothing happens at all

Angular: 13.3.4
PrimeNG: 13.3.3

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[flawesomesoft]

@mertsincan
I just updated the example to primeng 14.2.2 and did not notice any different behaviour concerning this problem.
The issue remains.
https://stackblitz.com/edit/github-a94aqp-xcqam8?file=src/app/app.module.ts

[chborntraeger]

I upgraded my project to ng15 with primeng 15.0.0-rc.1 and the problem still exists, so I'm opening a new issue - maybe we can get help this way. #