Return submitter in submitting states

[aaronadamsCA]

While a React Router submission is in progress, I'd love a straightforward way to access the specific element that submitted the form.

export function Button(props) {
  const ref = useRef(null);
  const { submitter } = useNavigation();
  const loading = ref.current === submitter;

  return (
    <button ref={ref} loading={loading}>
      {...props}
    </button>
  );
}

In a form with multiple submit buttons, this would (should?) let us more easily determine exactly which button was clicked.

We can do it ourselves in userland, but I think this could be a useful enough addition to the framework itself.

[sergiodxa]

You can add a name and value to the button, then use the formData to access it, you should probably do it already to know on your action function which button triggered it.

[rossipedia]

Also, by the time a navigation state changes it's entirely possible that the originating HTML element (if any) could have been removed due to a re-render in the originating component.