The Problem
Using unstable_inputProps on a field with a regex string type that happens to have flags creates an invalid pattern property on the input.
CodeSandbox Link
The Solution
Rather than assuming all regular expressions don't have flags, we should either throw an error if they do, or sanitize them and remove the flags.
It would be ideal to add this detail to the documentation too, to ensure developers know that their flags will be ignored so that they can adjust their expressions accordingly.
./src/input-props.ts:53
if (check.kind === "regex") {
- props.pattern = check.regex.toString().slice(1, -1);
+ const str = check.regex.toString();
+ const del = str[ 0 ] || "/";
+ props.pattern = str.slice(1, str.lastIndexOf(del));
}
Happy to make a pull request if necessary.
The Problem
Using
unstable_inputPropson a field with a regex string type that happens to have flags creates an invalidpatternproperty on the input.CodeSandbox Link
The Solution
Rather than assuming all regular expressions don't have flags, we should either throw an error if they do, or sanitize them and remove the flags.
It would be ideal to add this detail to the documentation too, to ensure developers know that their flags will be ignored so that they can adjust their expressions accordingly.
./src/input-props.ts:53if (check.kind === "regex") { - props.pattern = check.regex.toString().slice(1, -1); + const str = check.regex.toString(); + const del = str[ 0 ] || "/"; + props.pattern = str.slice(1, str.lastIndexOf(del)); }Happy to make a pull request if necessary.