1

I have been using regex pattern for some Lightning input field in LWC and also provided 'message-when-pattern-mismatch' error message.

regex is like : pattern="[a-zA-Z-]+"

As per the pattern, input field will only accept alphabet in lowercase, uppercase and hyphen. But if I provide any special character or number then instead of showing error in the UI, its showing error in the console.

Again if I modify the regex like pattern="[a-zA-Z\-]+" Now it shows pattern mismatch error in the UI.

Does anyone have any idea why it's happening suddenly? Previously it was working fine.

6
  • 3
    Putting the hyphen at the end of a character class doesn't work with some regex engines. Either put it at the start or escape it. Are you running the LWC on a different browser to what you have used before?
    – Phil W
    Commented Jun 8, 2023 at 15:22
  • Also, you may need to double escape it: \\- Commented Jun 8, 2023 at 19:41
  • Hi @Phil, I haven't changed my browser. Can you check in your org by creating a simple component?
    – Sahid
    Commented Jun 9, 2023 at 6:43
  • Hi @Casper, It was working fine without escaping. But now it's not. I just need to know the reason. Solution, I already have.
    – Sahid
    Commented Jun 9, 2023 at 6:46
  • Which browser are you using? Could it be some updates in the browser itself?
    – Phil W
    Commented Jun 9, 2023 at 8:23

1 Answer 1

1

This is not an LWC-specific issue, but is caused by a change in the browser's pattern matching specifications.

There have been changes to the regular expression pattern matching options in Chromium.
https://chromium-review.googlesource.com/c/v8/v8/+/4212393

This change has been incorporated in Chrome 114.
https://chromestatus.com/feature/5149507107422208

Since Edge is also Chromium-based, it is likely that similar issues may arise.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .