Fix cursor behavior when using table dropdown menu

addon/components/rdfa/dropdown-item.hbs

@@ -0,0 +1,3 @@
+<button role="menuitem" type="button" {{on "click" this.activateMenuItem}}>
+  {{yield}}
+</button>

addon/components/rdfa/dropdown-item.ts

@@ -0,0 +1,16 @@
+import Component from "@glimmer/component";
+import {action} from "@ember/object";
+
+interface Args {
+  menuAction?: () => void;
+  onActivate?: (event: MouseEvent) => void;
+}
+
+export default class DropdownItem extends Component<Args> {
+  @action
+  activateMenuItem(event: MouseEvent) {
+    event.preventDefault();
+    this.args.menuAction?.();
+    this.args.onActivate?.(event);
+  }
+}

addon/components/rdfa/editor-toolbar.hbs

@@ -87,33 +87,33 @@
           </button>
         {{/if}}
       {{/if}}
-        <Rdfa::ToolbarDropdown @dropdownButtonLabel="Table" @editor={{@editor}}>
+        <Rdfa::ToolbarDropdown @dropdownButtonLabel="Table" @editor={{@editor}} as |Menu|>
           {{#if this.isInTable}}
-            <button role="menuitem" type="button" {{on "click" this.insertRowBelow}}>
+            <Menu.Item @menuAction={{this.insertRowBelow}}>
               {{t "ember-rdfa-editor.add-row-below"}}
-            </button>
-            <button role="menuitem" type="button" {{on "click" this.insertRowAbove}}>
+            </Menu.Item>
+            <Menu.Item @menuAction={{this.insertRowAbove}}>
               {{t "ember-rdfa-editor.add-row-above"}}
-            </button>
-            <button role="menuitem" type="button" {{on "click" this.insertColumnAfter}}>
+            </Menu.Item>
+            <Menu.Item @menuAction={{this.insertColumnAfter}}>
               {{t "ember-rdfa-editor.add-column-after"}}
-            </button>
-            <button role="menuitem" type="button" {{on "click" this.insertColumnBefore}}>
+            </Menu.Item>
+            <Menu.Item @menuAction={{this.insertColumnBefore}}>
               {{t "ember-rdfa-editor.add-column-before"}}
-            </button>
-            <button role="menuitem" type="button" {{on "click" this.removeTableRow}}>
+            </Menu.Item>
+            <Menu.Item @menuAction={{this.removeTableRow}}>
               {{t "ember-rdfa-editor.delete-row"}}
-            </button>
-            <button role="menuitem" type="button" {{on "click" this.removeTableColumn}}>
+            </Menu.Item>
+            <Menu.Item @menuAction={{this.removeTableColumn}}>
               {{t "ember-rdfa-editor.delete-column"}}
-            </button>
-            <button role="menuitem" type="button" {{on "click" this.removeTable}}>
+            </Menu.Item>
+            <Menu.Item @menuAction={{this.removeTable}}>
               {{t "ember-rdfa-editor.delete-table"}}
-            </button>
+            </Menu.Item>
           {{else}}
-            <button role="menuitem" type="button" {{on "click" this.insertTable}}>
+            <Menu.Item @menuAction={{this.insertTable}}>
               {{t "ember-rdfa-editor.insert-table"}}
-            </button>
+            </Menu.Item>
           {{/if}}
         </Rdfa::ToolbarDropdown>
     </div>

addon/components/rdfa/toolbar-dropdown.hbs

@@ -1,25 +1,26 @@
 <div class="say-dropdown" ...attributes>
   <button class="say-dropdown__button {{if this.dropdownOpen "is-active" ""}}" aria-haspopup="true"
-          aria-expanded="{{if this.dropdownOpen "true" "false"}}" type="button" {{on "click" this.toggleDropdown}}>
+          aria-expanded="{{if this.dropdownOpen "true" "false"}}" type="button" {{on "click" this.openDropdown}}>
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" class="say-icon say-icon--large" aria-hidden="true">
       <path d="M3.23694339,3.23694339 L3.23694339,40.7630566 L40.7630566,40.7630566 L40.7630566,3.23694339 L3.23694339,3.23694339 Z M19.9152368,36.5935302 L7.40650735,36.5935302 L7.40650735,24.0847632 L19.9152368,24.0847632 L19.9152368,36.5935302 Z M19.9152368,19.9152368 L7.40650735,19.9152368 L7.40650735,7.40650735 L19.9152368,7.40650735 L19.9152368,19.9152368 Z M36.5935302,36.5935302 L24.0847632,36.5935302 L24.0847632,24.0847632 L36.5935302,24.0847632 L36.5935302,36.5935302 Z M36.5935302,19.9152368 L24.0847632,19.9152368 L24.0847632,7.40650735 L36.5935302,7.40650735 L36.5935302,19.9152368 Z"/>
     </svg>
     <span class="say-u-hidden-visually">{{@dropdownButtonLabel}}</span>
   </button>
-  <div id="{{this.dropdownId}}"
-       class="say-dropdown__menu {{if this.dropdownOpen "is-visible" ""}}"
-       role="menu"
-       tabindex="-1"
-    {{focus-trap
-            isActive=this.focusTrapActive
-            shouldSelfFocus=true
-            focusTrapOptions=(hash
-                    onDeactivate=this.deactivateDropdown
-                    returnFocusOnDeactivate=false
-                    clickOutsideDeactivates=true)
-    }}
-          {{on "click" this.deactivateFocusTrap}}
-  >
-    {{yield}}
-  </div>
+  {{#if this.dropdownOpen}}
+    <div id="{{this.dropdownId}}"
+         class="say-dropdown__menu is-visible"
+         role="menu"
+         tabindex="-1"
+      {{focus-trap
+              isActive=true
+              shouldSelfFocus=true
+              focusTrapOptions=(hash
+                      allowOutsideClick=this.closeDropdown
+                      returnFocusOnDeactivate=false
+              )
+      }}
+    >
+      {{yield (hash Item=(component "rdfa/dropdown-item" onActivate=this.closeDropdown))}}
+    </div>
+    {{/if}}
 </div>

addon/components/rdfa/toolbar-dropdown.js

@@ -2,36 +2,33 @@ import Component from "@glimmer/component";
 import {action} from "@ember/object";
 import {guidFor} from '@ember/object/internals';
 import {tracked} from "@glimmer/tracking";
+import {paintCycleHappened} from "@lblod/ember-rdfa-editor/editor/utils";
 
 export default class AuDropdown extends Component {
   // Create a dropdown ID
   dropdownId = 'dropdown-' + guidFor(this);
 
   // Track dropdown state
   @tracked dropdownOpen = false;
-  @tracked focusTrapActive = false;
-
-  activateFocusTrap() {
-    this.focusTrapActive = true;
-  }
 
   @action
-  deactivateFocusTrap() {
-    this.focusTrapActive = false;
+  openDropdown() {
+    this.dropdownOpen = true;
   }
 
   @action
-  deactivateDropdown() {
-    this.dropdownOpen = false;
-    this.args.editor.model.writeSelection();
-  }
+  async closeDropdown(event) {
 
-  // toggle dropdown
-  @action
-  toggleDropdown() {
-    this.dropdownOpen = !this.dropdownOpen;
-    if (this.dropdownOpen) {
-      this.activateFocusTrap();
+    if(event) {
+      event.preventDefault();
     }
+    this.dropdownOpen = false;
+    // It seems impossible to manage the focus correctly synchronously
+    // some kind of focus event always seems to happen at the wrong time
+    // so this is a bit of hack, but it works well.
+    await paintCycleHappened();
+    this.args.editor.model.selection.lastRange.start.parent.boundNode?.focus();
+    this.args.editor.model.writeSelection();
+    return true;
   }
 }

app/components/rdfa/dropdown-item.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor/components/rdfa/dropdown-item';