What is the recommended way to reset a form with custom form inputs?

[seanlennaerts]

Let's say we have the following form:

export async function loader({ request }: LoaderFunctionArgs) {
  return json({ title: 'My awesome Draft PR', description: "Great PR description..." })
}

export async function action({ request }: ActionFunctionArgs) { 
  // ...
}

export function EditPullRequest() {
  const { title, reviewers } = useLoaderData<typeof loader>();
  return (
    <Form method="POST">
      <input name="title" defaultValue={ title } />
      <RichTextEditor name="reviewers" defaultValue={ description } />
      <button type="reset">Discard</button>
      <button type="submit">Update</button>
    </Form>
  )
}

function RichTextEditor({ name, defaultValue }) {
  const [value, setValue] = useState(defaultValue)
  return (
    <>
      <SomeEditor value={ value } onChange={ setValue } /> 
      {/* Hidden textarea that mirrors state of editor for form submission */}
      <textarea name={ name } className="hidden" defaultValue={ value } value={ value } />
    </>
  )
}

We know that input and textarea are both resettable elements so clicking on the Discard button will automatically reset the title input and the hidden description textarea. From the user's perspective clicking on the Discard button will successfully reset the title input but the description textarea will remain unchanged since the Rich Text Area they see is a controlled component.

Unfortunately resetting a form does NOT trigger any events in the form's children by design - unfortunately we can't do something like: <textarea onReset={ () => setValue(defaultValue) }.

Ideally I do not want to lift the RichTextEditor state into the parent - I'm looking for a pattern that will be contained inside my custom form elements (i.e. RichTextEditor) such that the developer doesn't need to worry about wiring the form's onReset event with resetting all the controlled components.

For the keen eyed among you 👀

You may have noticed that having both a defaultValue and a value prop would generate an error. The defaultValue is important because that's what the HTMLFormElement.reset() uses. The workaround I found for this:

function RichTextEditor({ name, defaultValue }) {
  // ...

  useEffect(() => {
    const nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(
      window.HTMLTextAreaElement.prototype,
      'value'
    )?.set
    nativeTextAreaValueSetter?.call(ref.current, value)
    // optionally dispatch `change` event useful for `form.onChange()` to work properly
  }, [value])

  return (
    <>
      <SomeEditor value={ value } onChange={ setValue } /> 
      <textarea name={ name } type="hidden" defaultValue={ value } />
    </>
  )
}

We almost need some 2-way data binding between the hidden textarea and the <SomeEditor /> component. I'm pretty sure I can solve this with a form library like react-hook-forms but I'm curious to hear what other solutions the community has come up with? What is the "use the platform" way to reset custom form inputs?

[kiliman]

Your custom input could find the closest form and add a listener for the reset event.

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset_event

[seanlennaerts]

I just discovered this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form

[seanlennaerts]

I think I can answer my own question here but will still open to hear any other solutions from the community.

My goal in all of this is to create custom form elements that will behave just like native form elements (ie input, textarea, select) where the developer can put it inside a <Form> and expect Form submissions, Form.onChange and Form.onReset to just work™️ .

Form submissions

For this I think the path is pretty clear: use hidden inputs:

function MyCustomFormElement = () => {
  const [value, setValue] = useState('')

  return (
    <>
      <SomeStatefulFormComponent value={value} onChange={setOnChange} />
      {/* tip: can use <textarea /> instead if you need to preserve new lines*/}
      <input type="hidden" value={value} />
    </>
  )
}

Form.onChange

I want react's Form.onChange event to work because in my UX I want to show if there are "unsaved changes" in the form.

<Form onChange={(e) => setIsDirty(isFormDirty(e.currentTarget))}

Unfortunately we cannot update the hidden inputs value AND emit a "change" event. The change event will be swallowed due to react event deduping. To get around this we can use the value setter on the prototype:

function MyCustomFormElement = () => {
  const [value, setValue] = useState('')
  const hiddenInputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    if (!hiddenInputRef.current) return // if not inside form, ignore
    const inputValueSetter = Object.getOwnPropertyDescriptor(
      window.HTMLInputElement.prototype,
      'value',
    )?.set
    inputValueSetter?.call(hiddenInputRef.current, value)
    hiddenInputRef.current.dispatchEvent(new Event('change', { bubbles: true }))
  }, [value])

  return (
    <>
      <SomeStatefulFormComponent value={value} onChange={setOnChange} />
      <input ref={hiddenInputRef} type="hidden" defaultValue={value} />
    </>
  )
}

To read more about this solution see: facebook/react#10135 (comment)

Form.onReset

We want our custom form elements to reset to defaultValue whenever From.reset() is triggered (ie user clicks on <button type="reset">Discard</button>). To achieve this we can add a 'reset' event listener. Thanks to @kiliman for sending me down the right path.

function MyCustomFormElement = ({ defaultValue }) => {
  const [value, setValue] = useState('')
  const hiddenInputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    // this gets the form element with which the input is associated with
    // see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form 
    const form = hiddenInputRef.current?.form
    if (!form) return
    
    const resetHandler = event => {
      if(event.target === form) {
        setValue(defaultValue)
      }
    }
    document.addEventListener('reset', resetHandler)

    return () => document.removeEventListener('reset', resetHandler)
  }, [defaultValue])

  // rest of component...

(note: I haven't tested this code)

TLDR

Turns out this has all been thoughtfully built by at least these 2 libraries:

• remix-validated-form: specifically this doc: https://www.remix-validated-form.io/reference/use-control-field
• conform.guide: specifically this doc: https://conform.guide/api/react#useinputevent
  • you can even see how similar the implementations are for conform's useInputEvent hook (though more thorough): https://github.com/edmundhung/conform/blob/0c636d41f3b1577ef7ed2d23e899a4b0bd834191/packages/conform-react/hooks.ts#L835

Hope this helps someone out there.