[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:
@@ -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
|
||||
|
||||
@@ -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">×</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">×</div>
|
||||
|
||||
Reference in New Issue
Block a user