[FIX] website: convert bootstrap modal option

Before this commit, the popup snippets were configuring the modal option
for bootstrap 4 rather than 5.
The `data-focus` in bootstrap 4 becomes `data-bs-focus` in bootstap 5.

Without `data-bs-focus` option, the Newsletter popup snippet became
uneditable because any click inside popup changed the selection to be
inside the first focusable element within the modal.

The reason of the input being focused is: upon click inside the modal,
the target of the focusin event is the parent of the modal because that
parent is contenteditable="true". Because that target is outside the
modal, `_handleFocusin` correct the selection by focusing the text
input.

task-3102155

closes odoo/odoo#109148

X-original-commit: bc99f3cdb5c2fca59a24dc4970c9ca6e69721838
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit is contained in:
Nicolas Bayet
2023-01-05 11:35:58 +01:00
parent 145b44fa57
commit 3ce4e7f9aa
3 changed files with 9 additions and 2 deletions
@@ -49,6 +49,13 @@ options.registry.SnippetPopup = options.Class.extend({
*/
onBuilt: function () {
this._assignUniqueID();
// Fix in stable to convert the data-focus bootstrap option from version 4.0 to
// 5.1 (renamed to data-bs-focus).
const popup = this.$target.closest('.s_popup_middle');
if (popup && popup.attr('data-focus')) {
popup.attr('data-bs-focus', popup.attr('data-focus'));
popup[0].removeAttribute('data-focus');
}
},
/**
* @override
+1 -1
View File
@@ -7,7 +7,7 @@
their XML definition here as that would hurt the drag and drop feature.
-->
<div class="s_popup o_snippet_invisible" data-vcss="001">
<div class="modal fade s_popup_middle" style="background-color: var(--black-50) !important;" data-show-after="5000" data-display="afterDelay" data-consents-duration="7" data-focus="false" data-bs-backdrop="false" tabindex="-1" role="dialog">
<div class="modal fade s_popup_middle" style="background-color: var(--black-50) !important;" data-show-after="5000" data-display="afterDelay" data-consents-duration="7" data-bs-focus="false" data-bs-backdrop="false" tabindex="-1" role="dialog">
<div class="modal-dialog d-flex">
<div class="modal-content oe_structure">
<div class="s_popup_close js_close_popup o_we_no_overlay o_not_editable" aria-label="Close">&#215;</div>
@@ -149,7 +149,7 @@
<div class="modal fade s_popup_middle o_newsletter_modal"
style="background-color: var(--black-50) !important;"
data-show-after="5000" data-display="afterDelay" data-consents-duration="7"
data-focus="false" data-bs-backdrop="false" tabindex="-1" role="dialog">
data-bs-focus="false" data-bs-backdrop="false" tabindex="-1" role="dialog">
<div class="modal-dialog d-flex">
<div class="modal-content oe_structure">
<div class="s_popup_close js_close_popup o_we_no_overlay o_not_editable" aria-label="Close">&#215;</div>