Pass a custom function when onChange is triggered for a component

[taylorkaren]

Context

This comes from the 8/9/22 walkthrough session with Adam Whitlock (notes page).

Adam previously submitted a PR that added the ability to pass a custom function when onChange is triggered for the text field component.

This ticket is to look into passing a custom function when onChange is triggered for any component so that there is a way to do this in general for all components instead of addressing them one at a time.

Task Description

• VAFSC form field components that use an onChange handler should be extended to accept a custom handler passed in as a prop in addition to the formik onChange handler.

Considerations

• Custom onChange that was added to TextField. Something similar can probably be used for the other fields.
• Components that need to be updated:
  • SSN field
  • Select field
  • Radio group
  • Phone field
  • Number field
  • Email field
  • Date field
  • Checkbox field

Acceptance Criteria

• [ ] onChange prop support has been added to all of the components above
• [ ] PR has been merged into main

[harshil1793]

@micahchiang The email field is already using the TextField component so I believe we don't need to make any changes to Email field, right?

[micahchiang]

@harshil1793 - Users should be able to pass their own onChange handler to email field. Can they do that now? I see this is returned:

  return (
    <TextField
      id={id}
      {...props}
      onChange={field.onChange}
      value={value}
      onBlur={() => helpers.setTouched(true)}
    />

I think they need to be able to pass a handler as a prop to email field.

[va-vsp-bot]

:tada: This issue has been resolved in version 1.4.6 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: