diff --git a/changes/issue-1475-flash-message-bug b/changes/issue-1475-flash-message-bug new file mode 100644 index 0000000000..5a19645ff2 --- /dev/null +++ b/changes/issue-1475-flash-message-bug @@ -0,0 +1 @@ +* Does not re-render page to display flash message \ No newline at end of file diff --git a/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx b/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx index f95adc9353..d874ef174f 100644 --- a/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx +++ b/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect } from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; @@ -21,6 +21,17 @@ const FlashMessage = ({ [`${baseClass}--full-width`]: fullWidth, }); + useEffect(() => { + if (alertType === "success" && isVisible) { + setTimeout(function () { + document.getElementById(`${klass}`).style.visibility = "visible"; + }, 0); // Ensures successive, success alerts are visible + setTimeout(function () { + document.getElementById(`${klass}`).style.visibility = "hidden"; + }, 4000); // Hides success alerts after 4 seconds + } + }); + if (!isVisible) { return false; } @@ -28,11 +39,6 @@ const FlashMessage = ({ const alertIcon = alertType === "success" ? "success-check" : "warning-filled"; - // Success alerts will not be visible after 4 seconds - if (alertType === "success") { - setTimeout(onRemoveFlash, 4000); - } - return (