Fixed server rendered flash not being removed on click
This commit is contained in:
parent
fe3ec2d921
commit
fc828b401c
3 changed files with 34 additions and 2 deletions
|
@ -40,6 +40,10 @@ const createFlashEl = (message, type, isInContentWrapper = false) => `
|
|||
</div>
|
||||
`;
|
||||
|
||||
const removeFlashClickListener = (flashEl, fadeTransition) => {
|
||||
flashEl.parentNode.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
|
||||
};
|
||||
|
||||
/*
|
||||
* Flash banner supports different types of Flash configurations
|
||||
* along with ability to provide actionConfig which can be used to show
|
||||
|
@ -70,7 +74,7 @@ const createFlash = function createFlash(
|
|||
flashContainer.innerHTML = createFlashEl(message, type, isInContentWrapper);
|
||||
|
||||
const flashEl = flashContainer.querySelector(`.flash-${type}`);
|
||||
flashEl.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
|
||||
removeFlashClickListener(flashEl, fadeTransition);
|
||||
|
||||
if (actionConfig) {
|
||||
flashEl.innerHTML += createAction(actionConfig);
|
||||
|
@ -90,5 +94,6 @@ export {
|
|||
createFlashEl,
|
||||
createAction,
|
||||
hideFlash,
|
||||
removeFlashClickListener,
|
||||
};
|
||||
window.Flash = createFlash;
|
||||
|
|
|
@ -64,7 +64,7 @@ import './diff';
|
|||
import './dropzone_input';
|
||||
import './due_date_select';
|
||||
import './files_comment_button';
|
||||
import Flash from './flash';
|
||||
import Flash, { removeFlashClickListener } from './flash';
|
||||
import './gl_dropdown';
|
||||
import './gl_field_error';
|
||||
import './gl_field_errors';
|
||||
|
@ -339,4 +339,10 @@ $(function () {
|
|||
event.preventDefault();
|
||||
gl.utils.visitUrl(`${action}${$(this).serialize()}`);
|
||||
});
|
||||
|
||||
const flashContainer = document.querySelector('.flash-container');
|
||||
|
||||
if (flashContainer && flashContainer.children.length) {
|
||||
removeFlashClickListener(flashContainer.children[0]);
|
||||
}
|
||||
});
|
||||
|
|
|
@ -2,6 +2,7 @@ import flash, {
|
|||
createFlashEl,
|
||||
createAction,
|
||||
hideFlash,
|
||||
removeFlashClickListener,
|
||||
} from '~/flash';
|
||||
|
||||
describe('Flash', () => {
|
||||
|
@ -266,4 +267,24 @@ describe('Flash', () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('removeFlashClickListener', () => {
|
||||
beforeEach(() => {
|
||||
document.body.innerHTML += '<div class="flash-container"><div class="flash"></div></div>';
|
||||
});
|
||||
|
||||
it('removes global flash on click', (done) => {
|
||||
const flashEl = document.querySelector('.flash');
|
||||
|
||||
removeFlashClickListener(flashEl, false);
|
||||
|
||||
flashEl.parentNode.click();
|
||||
|
||||
setTimeout(() => {
|
||||
expect(document.querySelector('.flash')).toBeNull();
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue