Replaced the "clear" method with the "onOpen" method when the account is clicked in the RecurringItemEditor in the JavaScript RecurringAccountSelector class.

src/accounting/static/js/option-form.js

@@ -619,7 +619,7 @@ class RecurringItemEditor {
         this.#accountSelector = new RecurringAccountSelector(this);
 
         this.#name.onchange = () => this.#validateName();
-        this.#accountControl.onclick = () => this.#accountSelector.clear();
+        this.#accountControl.onclick = () => this.#accountSelector.onOpen();
         this.#descriptionTemplate.onchange = () => this.#validateDescriptionTemplate();
         this.#form.onsubmit = () => {
             if (this.#validate()) {
@@ -847,15 +847,6 @@ class RecurringAccountSelector {
         this.#clearButton.onclick = () => this.editor.clearAccount();
     }
 
-    /**
-     * Clears the filter.
-     *
-     */
-    clear() {
-        this.#query.value = "";
-        this.#filterOptions();
-    }
-
     /**
      * Filters the options.
      *
@@ -878,6 +869,28 @@ class RecurringAccountSelector {
             this.#queryNoResult.classList.add("d-none");
         }
     }
+
+    /**
+     * The callback when the account selector is shown.
+     *
+     */
+    onOpen() {
+        this.#query.value = "";
+        this.#filterOptions();
+        console.log(this.editor.accountCode);
+        for (const option of this.#options) {
+            option.setActive(option.code === this.editor.accountCode);
+        }
+        if (this.editor.accountCode === null) {
+            this.#clearButton.classList.add("btn-secondary");
+            this.#clearButton.classList.remove("btn-danger");
+            this.#clearButton.disabled = true;
+        } else {
+            this.#clearButton.classList.add("btn-danger");
+            this.#clearButton.classList.remove("btn-secondary");
+            this.#clearButton.disabled = false;
+        }
+    }
 }
 
 /**
@@ -962,4 +975,17 @@ class RecurringAccount {
             this.#element.classList.add("d-none");
         }
     }
+
+    /**
+     * Sets whether the option is active.
+     *
+     * @param isActive {boolean} true if active, or false otherwise
+     */
+    setActive(isActive) {
+        if (isActive) {
+            this.#element.classList.add("active");
+        } else {
+            this.#element.classList.remove("active");
+        }
+    }
 }