From bf25bf4161a428618e1cacfe93f02da1bd82cff3 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Fri, 25 Mar 2022 14:46:25 +0000
Subject: [PATCH] [FIX] web_editor: properly navigate Powebox commands with
 arrow keys

The commands are grouped by command group when rendered by the Powerbox.
That creates a dissociation between the order in which they are rendered
and the order of the arrays in which they are present in the code. The
mechanism to navigate between them with the arrow keys is however
dependent on the latter. As a result we may end up with a visually
disordered navigation.
This adds a private function to reorder these arrays in the same way as
they are rendered, thereby fixing the dissociation.

task-2802749

closes odoo/odoo#87209

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
---
 .../lib/odoo-editor/src/powerbox/Powerbox.js  | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/addons/web_editor/static/lib/odoo-editor/src/powerbox/Powerbox.js b/addons/web_editor/static/lib/odoo-editor/src/powerbox/Powerbox.js
index 3cb4c748f67..b7acdbc21f5 100644
--- a/addons/web_editor/static/lib/odoo-editor/src/powerbox/Powerbox.js
+++ b/addons/web_editor/static/lib/odoo-editor/src/powerbox/Powerbox.js
@@ -156,6 +156,7 @@ export class Powerbox {
     open(openOptions) {
         this.options.onActivate && this.options.onActivate();
         this._currentOpenOptions = openOptions;
+        this._currentOpenOptions.commands = this._orderCommandsByGroup(openOptions.commands);
 
         const openOnKeyupTarget =
             this._currentOpenOptions.openOnKeyupTarget || this.options.editable;
@@ -285,6 +286,7 @@ export class Powerbox {
 
     nextOpenOptions(openOptions) {
         this._currentOpenOptions = openOptions;
+        this._currentOpenOptions.commands = this._orderCommandsByGroup(openOptions.commands);
         this._initialValue = (
             this._currentOpenOptions.openOnKeyupTarget || this.options.editable
         ).textContent;
@@ -304,11 +306,11 @@ export class Powerbox {
     }
 
     // -------------------------------------------------------------------------
-    // private
+    // Private
     // -------------------------------------------------------------------------
 
     _filter(term, commands) {
-        const initalCommands = commands;
+        const initialCommands = commands;
         term = term.toLowerCase();
         term = term.replaceAll(/\s/g, '\\s');
         const regex = new RegExp(
@@ -318,14 +320,25 @@ export class Powerbox {
                 .join('.*'),
         );
         if (term.length) {
-            commands = initalCommands.filter(command => {
+            commands = initialCommands.filter(command => {
                 const commandText = (command.groupName + ' ' + command.title).toLowerCase();
                 return commandText.match(regex);
             });
         }
         return commands;
     }
-
+    _orderCommandsByGroup(commands) {
+        const groups = {};
+        for (const command of commands) {
+            groups[command.groupName] = groups[command.groupName] || [];
+            groups[command.groupName].push(command);
+        }
+        const reorderedCommands = [];
+        for (const groupCommands of Object.values(groups)) {
+            reorderedCommands.push(...groupCommands);
+        }
+        return reorderedCommands;
+    }
     _resetPosition() {
         const position = getRangePosition(this.el, this.options.document);
         if (!position) {