Close action menu when making a selection

But don't hide it immediately, because the user can't see if they made a selection, or accidentally closed it. Instead, fade slowly so that you can see the selected option momentarily (like system menus). This gives enough feedback while we wait for the selected action to perform.

I did attempt a blink on the item background colour, like my favourite OS does which is really helpful. But couldn't get the CSS to work.

spec/javascripts/stimulus/vertical_ellipsis_menu_controller_test.js

@@ -16,12 +16,13 @@ describe("VerticalEllipsisMenuController test", () => {
       <div data-controller="vertical-ellipsis-menu" id="root">
         <div data-action="click->vertical-ellipsis-menu#toggle" id="button">...</div>
         <div data-vertical-ellipsis-menu-target="content" id="content">
-          
+          <a href="#" id="item"></a>
         </div>
       </div>
     `;
     const button = document.getElementById("button");
     const content = document.getElementById("content");
+    const item = document.getElementById("item");
   });
 
   it("add show class to content when toggle is called", () => {
@@ -43,4 +44,15 @@ describe("VerticalEllipsisMenuController test", () => {
     document.body.click();
     expect(content.classList.contains("show")).toBe(false);
   });
+
+  it("adds selected class to content when clicking a menu item", () => {
+    button.click();
+    expect(content.classList.contains("selected")).toBe(false);
+    item.click();
+    expect(content.classList.contains("selected")).toBe(true);
+
+    // and removes it again when clicking button again
+    button.click();
+    expect(content.classList.contains("selected")).toBe(false);
+  });
 });