diff --git a/src/components/contact-form/ContactForm.tsx b/src/components/contact-form/ContactForm.tsx index 3f8dc081945ade47761c4542e65097c3d20a2598..8b27ec3280ba8acac7df5f47503d8faa69cc2208 100644 --- a/src/components/contact-form/ContactForm.tsx +++ b/src/components/contact-form/ContactForm.tsx @@ -48,6 +48,10 @@ export const ContactForm: React.FC<ContactFormProps> = ({ setModalContent(JSON.stringify(formData)); }; + // For use in the CSSTransition, see + // https://github.com/reactjs/react-transition-group/issues/668#issuecomment-695162879 + const submitRef = React.useRef<any>(null); + return ( <form onSubmit={submit} className={`${styles.ContactForm}`} aria-label={t("Contact form")}> <Fieldset legend={t('contact.details')}> @@ -106,27 +110,29 @@ export const ContactForm: React.FC<ContactFormProps> = ({ key={urgentIntent ? 'urgent' : 'normal'} in={urgentIntent} classNames={{ ...panelTransition }} + nodeRef={submitRef} unmountOnExit={true} mountOnEnter={true} - addEndListener={(node: HTMLElement, done: EventListener) => { + addEndListener={(done: () => void) => { // use the css transitionend event to mark the finish of a transition - // istanbul ignore next - node.addEventListener('transitionend', done, false); + submitRef.current?.addEventListener('transitionend', done, false); }} > - {urgentIntent ? ( - <UrgentRequest sendUrgent={() => sendRequest(true)} /> - ) : ( - <button - className="good" - onClick={(event) => { - event.preventDefault(); - sendRequest(); - }} - > - {t('submit')} - </button> - )} + <div ref={submitRef}> + {urgentIntent ? ( + <UrgentRequest sendUrgent={() => sendRequest(true)} /> + ) : ( + <button + className="good" + onClick={(event) => { + event.preventDefault(); + sendRequest(); + }} + > + {t('submit')} + </button> + )} + </div> </CSSTransition> </SwitchTransition> </div>