Which generators are affected?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

1. visit DBTextarea v4.2.1 showcase page
2. open dev tools
3. focus any DBTextarea component
4. press and hold any key on your keyboard for more than one second
5. observe component providing slower and slower value feedback

Expected Behaviour

The DBTextarea component provides instant value feedback.

Screenshots

No response

Browser version

Chrome

Add any other context about the problem here.

After some debugging and performance testing, I think I am able to pinpoint the issue. The file frontend/node_modules/@db-ux/core-foundations/build/styles/defaults/default-required.scss seems to contain two CSS blocks which are mainly responsible for the very slow DBTextarea feedback.

The first block is on line 36:

// We'll set the color scheme (https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) to light and dark if it's not already set as a meta tag in the head, which would be the recommended way.
html:not(:has(> head > meta[name="color-scheme"])) {
	color-scheme: light dark;
}

The second one is on line 81:

*,
::before,
::after {
	box-sizing: inherit;
}

If those two block stay as they are, in our app we get such performance:

If the first block is commented out, and the second one is changed to box-sizing: border-box;, we get such performance:

This results to:

• original SCSS:
  • almost 29 million match attempts
  • more than 2 million match counts
• optimized SCSS:
  • around 50 thousund match attempts
  • around 5.5 thousund match counts

I'm too tired to calculate the difference in %, but you got the gist.

Possible solutions:

• the first CSS block can be noted in your documentation that <meta name="color-scheme"> is required in order to use the color schemes provided by your library
• the second CSS block can be easily fixed by using box-sizing: border-box (you already define html { box-sizing: var(--db-box-sizing, border-box); } in the same SCSS file, so this should be ok)

I hope this bug report is detailed enough. Let me know if you need any more info.

Which DB business unit do you work for?

None

”DB Systel” please enter your customer / ”other” please enter your area or business unit.

No response

What project are you working on?

No response