prop.pattern produces invalid html

[Samuel-Dufour]

The prop.pattern function available on input to provide a validation pattern takes a regular expression parameter and generates a js regex instead of the pattern only.

For example prop.pattern (System.Text.RegularExpressions.Regex "\d{2}:\d{2}:\d{2}") produces pattern="/\d{2}:\d{2}:\d{2}/gu"

What should be produced is pattern="\d{2}:\d{2}:\d{2}".

A workaround is to use Interop.mkAttr "pattern" "\d{2}:\d{2}:\d{2}" so it could replace the current implementation but it means the pattern validity is checked later.

[Zaid-Ajaj]

Can we process the given regular expression so that it does give prop.pattern a valid pattern instead?

[MangelMaxime]

Looking at example online it seems like prop.pattern expect a string and not a RegExp instance, so I think we should just change it to string.

<label for="username">Username: (3-16 characters)</label>
<input id="username" name="username" type="text" value="Sasha" pattern="\w{3,16}" required />

<label for="pin">PIN: (4 digits)</label>
<input id="pin" name="pin" type="password" pattern="\d{4,4}" required />

[Zaid-Ajaj]

I've added an overload that accepts a string as for the regex, will try to see if we can get that to work

[MangelMaxime]

will try to see if we can get that to work

IHNO this never worked. Both React and MDN hints to the fact that pattern is an HTML property accepting a string.

pattern: A string. Specifies the pattern that the value must match.

• React documentation
• MDN documentation

The wording on MDN is confusing:

The pattern attribute specifies a regular expression the form control's value should match.

But later, it does mention it as

The pattern's regular expression is compiled with the 'v' flag.

Meaning that this is indeed the string representation of the pattern that can then be used to as an argument to RegExp.