Fix datepicker cloning

opf · Oct 11, 2024 · c78fb7f · c78fb7f
1 parent bebb971
commit c78fb7f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/frontend/src/stimulus/controllers/dynamic/subform.controller.ts b/frontend/src/stimulus/controllers/dynamic/subform.controller.ts
@@ -38,12 +38,12 @@ export default class SubformController extends Controller {
 
   declare readonly tableTarget:HTMLTableElement;
 
-  private rowTemplate:HTMLElement;
+  private rowTemplate:string;
 
   connect() {
     // We can't use a target as we duplicate the "template" without  much cleaning up
     const item = this.element.querySelector('[data-row-target]') as HTMLElement;
-    this.rowTemplate = item;
+    this.rowTemplate = item.outerHTML;
     item.remove();
   }
 
@@ -54,13 +54,16 @@ export default class SubformController extends Controller {
 
   addRow() {
     const index = this.itemCount;
-    const newRow = this.rowTemplate.cloneNode(true) as HTMLElement;
-    this.tableTarget.appendChild(newRow);
-    newRow.style.removeProperty('display');
-    newRow.outerHTML = newRow.outerHTML.replace(/INDEX/g, index.toString());
+    const newRow = this.rowTemplate.replace(/INDEX/g, index.toString());
+    this.tableTarget.insertAdjacentHTML('beforeend', newRow);
+
+    const last = this.tableTarget.lastElementChild as HTMLElement;
+    last.style.removeProperty('display'); // Show the row
 
     // Autofocus
-    setTimeout(() => newRow.querySelector<HTMLElement>('input')?.focus(), 10);
+    setTimeout(() => {
+      last.querySelector<HTMLElement>('input')?.focus();
+    }, 50);
   }
 
   get itemCount():number {

diff --git a/modules/costs/spec/features/members_hourly_rates_spec.rb b/modules/costs/spec/features/members_hourly_rates_spec.rb
@@ -57,6 +57,7 @@ def add_rate(rate:, date:)
     click_link_or_button "Add rate"
 
     datepicker = Components::BasicDatepicker.new
+    datepicker.expect_visible
     datepicker.set_date(date.strftime("%Y-%m-%d"))
 
     within "tr[id^='user_new_rate_attributes_']" do
@@ -68,6 +69,7 @@ def change_rate_date(from:, to:)
     input = find("table.rates .date input[data-value='#{from.strftime('%Y-%m-%d')}']")
     input.click
     datepicker = Components::BasicDatepicker.new
+    datepicker.expect_visible
     datepicker.set_date(to.strftime("%Y-%m-%d"))
   end