[Form] Custom matcher will not be triggered when you copy text or autofill

[ChocoLZS]

Bug report

Current Behavior

• Custom matcher will not be triggered when you paste text into input element.
• Autofill also has this problem.

This video only demonstrates the problem when pasting.

https://github.com/radix-ui/primitives/assets/61224208/b4cceb98-efb1-4eb1-a55f-9d3d86cca831

Expected behavior

• The custom form validation should be excuted when submitting, regardless of whether the validation passes or fails.

Reproducible example

CodeSandbox Template

Suggested solution

Additional context

Your environment

Radix-ui form official Codesandbox

{
  "dependencies": {
    "@radix-ui/colors": "latest",
    "@radix-ui/react-form": "latest",
    "@radix-ui/react-icons": "latest",
    "classnames": "latest",
    "react": "latest",
    "react-dom": "latest"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "latest",
    "autoprefixer": "latest",
    "postcss": "latest",
    "tailwindcss": "latest",
    "vite": "latest"
  },
  "scripts": {
    "start": "vite"
  }
}

Software	Name(s)	Version
Radix Package(s)	react-form	0.0.3
React	n/a	latest
Browser	codesandbox
Assistive tech
Node	n/a
npm/yarn
Operating System	windows	11

[jessefischer-workco]

Funny, I came here from an almost identical problem on the same day you posted this. I believe the same issue is happening with the following steps:

1. Type "equal" into the input box
2. Blur the input
3. Observe the "Custom Matcher error" message
4. Refocus on the input box
5. Delete any part of the word "equal" and then re-type it
6. Blur the input
7. Observe that there is no "Custom Matcher error" message anymore and that you are allowed to submit the form.

https://github.com/radix-ui/primitives/assets/92333589/37f2bfae-9c6f-469c-8266-8d6366225224

[mrtnpar]

Give a try to fix this one and I think I have it here https://github.com/radix-ui/primitives/pull/2560 Review and guidance is appreciated, thanks!

[rwbrockhoff]

I was able to get the form to validate a custom matcher for copy and paste:

const handleMatcher: SyncCustomMatcher = (value) => value === 'equal';

<FormMessage match={handleMatcher}> Your Custom Matcher Error Message </FormMessage>

I'm not sure what your code looks like, but if you use the SyncCustomMatcher (or AsyncCustomMatcher) as the type for the function being passed to match, you should be able to see the error on copy and paste. Perhaps we need a more flexible solution than that (maybe a more flexible type definition), but that worked for me!