MDL-73116 core: Add triggerElement parameter to saveCancel dialogue

triggerElement parameter is used to return the focus after modal is hidden
This commit is contained in:
Mikel Martín 2021-11-18 12:31:43 +01:00
parent 6652ec135b
commit 8b535c297b
3 changed files with 14 additions and 5 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -222,9 +222,13 @@ export const confirm = (title, question, saveLabel, noLabel, saveCallback, cance
* @param {String|Promise} saveLabel * @param {String|Promise} saveLabel
* @param {String|Promise} saveCallback * @param {String|Promise} saveCallback
* @param {String|Promise} cancelCallback * @param {String|Promise} cancelCallback
* @param {Object} options
* @param {HTMLElement} [options.triggerElement=null] The element that triggered the modal (will receive the focus after hidden)
* @returns {Promise} * @returns {Promise}
*/ */
export const saveCancel = async(title, question, saveLabel, saveCallback, cancelCallback) => { export const saveCancel = async(title, question, saveLabel, saveCallback, cancelCallback, {
triggerElement = null,
} = {}) => {
const pendingPromise = new Pending('core/notification:confirm'); const pendingPromise = new Pending('core/notification:confirm');
const [ const [
@ -250,6 +254,7 @@ export const saveCancel = async(title, question, saveLabel, saveCallback, cancel
modal.getRoot().on(ModalEvents.save, saveCallback); modal.getRoot().on(ModalEvents.save, saveCallback);
modal.getRoot().on(ModalEvents.cancel, cancelCallback); modal.getRoot().on(ModalEvents.cancel, cancelCallback);
modal.getRoot().on(ModalEvents.hidden, () => triggerElement?.focus());
pendingPromise.resolve(); pendingPromise.resolve();
return modal; return modal;
@ -262,10 +267,14 @@ export const saveCancel = async(title, question, saveLabel, saveCallback, cancel
* @param {Promise|String} title The header of the modal * @param {Promise|String} title The header of the modal
* @param {Promise|String} question What do we want the user to confirm * @param {Promise|String} question What do we want the user to confirm
* @param {Promise|String} saveLabel The modal action link text * @param {Promise|String} saveLabel The modal action link text
* @param {Object} options
* @param {HTMLElement} [options.triggerElement=null] The element that triggered the modal (will receive the focus after hidden)
* @return {Promise} * @return {Promise}
*/ */
export const saveCancelPromise = (title, question, saveLabel) => new Promise((resolve, reject) => { export const saveCancelPromise = (title, question, saveLabel, {
saveCancel(title, question, saveLabel, resolve, reject); triggerElement = null,
} = {}) => new Promise((resolve, reject) => {
saveCancel(title, question, saveLabel, resolve, reject, {triggerElement});
}); });
/** /**