esamattis / esamattis/react-zorm
Regex type with flags produces trailing slash in input props
- Dominant language
- TypeScript
- Stars
- 732
- Forks
- 11
- PR merge metrics
- No merged PRs in 30d
Description
### 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](https://codesandbox.io/p/sandbox/react-zorm-regex-pattern-field-invalid-t65kfd)
### 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`
```diff
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.
Contributor guide
Research direction
Start at src/input-props.ts:53 and reproduce the invalid pattern property with the linked CodeSandbox using a regex that has flags. Confirm that the generated input pattern has no trailing slash and that flags are ignored, then update the documentation to explain this behavior if the relevant documentation location is identified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100