fixup! Add a RemoteSelect base component

app/javascript/alchemy_admin/components/remote_select.js

@@ -14,20 +14,36 @@ export class RemoteSelect extends AlchemyHTMLElement {
 
     $(this.input)
       .select2(this.select2Config)
-      .on("select2-open", () => {
-        // add focus to the search input. Select2 is handling the focus on the first opening,
-        // but it does not work the second time. One process in select2 is "stealing" the focus
-        // if the command is not delayed. It is an intermediate solution until we are going to
-        // move away from Select2
-        setTimeout(() => {
-          document.querySelector("#select2-drop .select2-input").focus()
-        }, 100)
+      .on("select2-open", (evt) => {
+        this.onOpen(evt)
       })
       .on("change", (evt) => {
         this.onChange(evt)
       })
   }
 
+  /**
+   * Optional on change handler called by Select2.
+   * @param {Event} event
+   */
+  onChange(event) {
+    // Left empty for sub classes to define this as needed.
+  }
+
+  /**
+   * Optional on open handler called by Select2.
+   * @param {Event} event
+   */
+  onOpen(event) {
+    // add focus to the search input. Select2 is handling the focus on the first opening,
+    // but it does not work the second time. One process in select2 is "stealing" the focus
+    // if the command is not delayed. It is an intermediate solution until we are going to
+    // move away from Select2
+    setTimeout(() => {
+      document.querySelector("#select2-drop .select2-input").focus()
+    }, 100)
+  }
+
   get input() {
     return this.getElementsByTagName("input")[0]
   }
@@ -61,14 +77,6 @@ export class RemoteSelect extends AlchemyHTMLElement {
     }
   }
 
-  /**
-   * Optional on change handler called by Select2.
-   * @param {Event} event
-   */
-  onChange(event) {
-    // Left empty for sub classes to define this as needed.
-  }
-
   /**
    * Search query send to server from select2
    * @param {string} term