[FIX] web_editor: fix bg position opt status for parallax snippets

This happened:
- The user clicks on a parallax snippet
- For each option, call onFocus then updateUI:
    - The BG position is first, so update its UI
    - The parallax option is last, onFocus changes the BG position target
... this is broken since the BG position option was updated before the
parallax one was able to change its target. So the BG position was
updated by checking the background type of the snippet instead of its
internal parallax <span/> element.

This was working in 13.0 as changing the target automatically re-updated
the related option UI, now this is left to the dev to update the UI
afterwards or not.

In this case the fix is simple: the onFocus of all options should be
called, before calling the updateUI of all options. This actually
allows to make the code cleaner.

closes odoo/odoo#48428

X-original-commit: 912e849207709b31aa11b7a2bec9ed8dd8b43203
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web_editor/static/src/js/editor/snippets.editor.js

@@ -347,16 +347,19 @@ var SnippetEditor = Widget.extend({
             customize$Elements: show ? this._customize$Elements : [],
         });
         this._customize$Elements.forEach(($el, i) => {
-            var editor = $el.data('editor');
-            var styles = _.values(editor.styles);
-            _.sortBy(styles, '__order').forEach(style => {
-                if (show) {
-                    style.onFocus();
-                    style.updateUI();
-                } else {
-                    style.onBlur();
-                }
-            });
+            const editor = $el.data('editor');
+            const styles = _.chain(editor.styles).values().sortBy('__order')
+                            .value();
+            // TODO ideally: should account the async parts of updateUI and
+            // allow async parts in onFocus/onBlur.
+            if (show) {
+                // All onFocus before all updateUI as the onFocus of an option
+                // might affect another option (like updating the $target)
+                styles.forEach(style => style.onFocus());
+                styles.forEach(style => style.updateUI());
+            } else {
+                styles.forEach(style => style.onBlur());
+            }
         });
     },
     /**