Problem/Motivation

When create a Card component using ui_patterns, there are a number of errors in the browsers console that show up. 

Unable to check <input pattern=‘^\s*((?!(?:\d|[-]\d))[\S]+(\s+(?!(?:\d|[-]\d))[\S]+)*)?\s*$’> because ‘/^\s*((?!(?:\d|[-]\d))[\S]+(\s+(?!(?:\d|[-]\d))[\S]+)*)?\s*$/v’ is not a valid regexp: invalid character in class in regular expression

Tried with both layout builder and display_suite+manage display.

Using Firefox as the browser.

Steps to reproduce

  • Create a Card component as a section using layout_builder
  • Look in browsers inspector console for the errors

Proposed resolution

TBD

CommentFileSizeAuthor
#3 console-errors-card-1.png151.99 KBmengi
#3 console-errors.png37.76 KBmengi

Issue fork ui_patterns-3494338

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mengi created an issue. See original summary.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Status: Active » Postponed (maintainer needs more info)

Hi,

Thanks for the bug report.

I tried to reproduce the bug with Layout Builder and manage display. I was not able to reproduce the bug.

Is it possible to get some screenshots or a short recording to show the error please?

Which UI Patterns version are you using?

mengi’s picture

mengi commented
StatusFileSize
new console-errors.png37.76 KB
new console-errors-card-1.png151.99 KB

Using ui_patterns-beta6.

I was using Firefox, but I tried it using Chrome browser and the errors do not show up. So it seems to be browser based.

Error doesn't prevent using the Card component and it displays correctly.

mengi’s picture

mengi commented
Issue summary: View changes
Priority: Normal » Minor
Status: Postponed (maintainer needs more info) » Active
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

Thanks for the details.

Ok, on Firefox I too see the errors.

These errors comes from the attributes props with the "HTML classes" source, it is the "pattern" on the textfield input.

What is strange is that with other components which all have at least the standard attributes prop there is no error. Only with card.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Title: Card component shows console errors in the form. » Firefox: pattern HTML attribute invalid on USB card component
Project: UI Suite Bootstrap » UI Patterns (SDC in Drupal UI)
Version: 5.1.x-dev » 2.0.x-dev
pdureau’s picture

pdureau commented
Title: Firefox: pattern HTML attribute invalid on USB card component » [2.0.0-rc1] Firefox: pattern HTML attribute invalid on USB card component
Assigned: Unassigned » just_like_good_vibes

Mikael, it looks like something you are currently working on, doesn't it?

just_like_good_vibes’s picture

just_like_good_vibes
Location PARIS
commented
Assigned: just_like_good_vibes » grimreaper
Status: Active » Needs review
Related issues: +#3494336: [2.0.0-rc1] Validation error with identifier prop type

looks like #3494336: [2.0.0-rc1] Validation error with identifier prop type is fixing the issue, can someome check please ?

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » just_like_good_vibes
Status: Needs review » Active

Hi,

I have checked and the issue persist even with the fix of the other issue.

The fix in the other issue was on form submission.

This one is when the form is displayed.

just_like_good_vibes opened merge request !305

just_like_good_vibes’s picture

just_like_good_vibes
Location PARIS
commented
Assigned: just_like_good_vibes » grimreaper
Status: Active » Needs review

ok i pushed a better fix

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » just_like_good_vibes
Status: Needs review » Reviewed & tested by the community

Thanks!

I confirm that now it is ok.

just_like_good_vibes’s picture

just_like_good_vibes
Location PARIS
commented
Assigned: just_like_good_vibes » Unassigned
Status: Reviewed & tested by the community » Fixed
mengi’s picture

mengi commented

It was strange that it was only Card that was effected. After some testing, I found it was because the Card attributes has a default value. (ui_suite_bootstrap theme 5.1)

I put a default value in modal.component.yml and the error showed up.

I can also confirm that the errors are now gone.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.