From f63312c81135cd0bd53b750d5b7eabd0a59bd784 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Thu, 29 Apr 2021 13:53:53 -0400
Subject: [PATCH] Prevent multi credential state updates from happening after
 unmount

---
 .../Lookup/MultiCredentialsLookup.jsx         | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
index ecc1a268c4..d64c397c7e 100644
--- a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
+++ b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
@@ -1,5 +1,11 @@
 import 'styled-components/macro';
-import React, { Fragment, useState, useCallback, useEffect } from 'react';
+import React, {
+  Fragment,
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+} from 'react';
 import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { withI18n } from '@lingui/react';
@@ -26,6 +32,7 @@ async function loadCredentials(params, selectedCredentialTypeId) {
 }
 
 function MultiCredentialsLookup(props) {
+  const isMounted = useRef(null);
   const { value, onChange, onError, history, i18n } = props;
   const [selectedType, setSelectedType] = useState(null);
 
@@ -37,6 +44,9 @@ function MultiCredentialsLookup(props) {
   } = useRequest(
     useCallback(async () => {
       const types = await CredentialTypesAPI.loadAllTypes();
+      if (!isMounted.current) {
+        return;
+      }
       const match = types.find(type => type.kind === 'ssh') || types[0];
       setSelectedType(match);
       return types;
@@ -45,7 +55,11 @@ function MultiCredentialsLookup(props) {
   );
 
   useEffect(() => {
+    isMounted.current = true;
     fetchTypes();
+    return () => {
+      isMounted.current = false;
+    };
   }, [fetchTypes]);
 
   const {
@@ -72,6 +86,10 @@ function MultiCredentialsLookup(props) {
         CredentialsAPI.readOptions(),
       ]);
 
+      if (!isMounted.current) {
+        return;
+      }
+
       results.map(result => {
         if (result.kind === 'vault' && result.inputs?.vault_id) {
           result.label = `${result.name} | ${result.inputs.vault_id}`;
@@ -101,7 +119,11 @@ function MultiCredentialsLookup(props) {
   );
 
   useEffect(() => {
+    isMounted.current = true;
     fetchCredentials();
+    return () => {
+      isMounted.current = false;
+    };
   }, [fetchCredentials]);
 
   useEffect(() => {