Prevent Modal from re-registering & resetting focus when onRequestClose is mutated

[diondiondion]

When the close handler of the Modal component is recreated during a render while the modal is open, it will unregister & immediately re-register the modal. This will mutate the modalStack and cause the user's focus to be reset to whichever element caused the previous render.

This re-registering & focus reset shouldn't happen, as Modals should only unregister when they're actually closed. One way to prevent this would be to store the latest reference to the onRequestClose handler in a React ref inside of useModalManager. This ref can be mutated without causing a re-registration, and without risking a stale close handler (which would be the result of simply removing the prop from the effect's dependency array).

To recreate the bug:

const [someState, setSomeState] = React.useState('');
const [someOtherState, setSomeOtherState] = React.useState('');

<Modal
	name="modal"
	onRequestClose={() => {}}
	aria-labelledby="modal"
>
	<input type="text" value={someState} onChange={e => setSomeState(e.target.value)} />
	<input type="text" value={someOtherState} onChange={e => setSomeOtherState(e.target.value)} />
</Modal>

Typing into one of the inputs, then moving to another input, should get you into a "focus loop" where focus is continuously moved back and forth between both inputs as you type, as the modal's close handler is recreated on every state update.

The fix in this scenario is to either memoise the function passed to onRequestClose, or in this case to simply move it outside of the component definition.