esamattis / esamattis/react-zorm

Regex type with flags produces trailing slash in input props

Open
#63 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.