Add cleanup and deduplication logic to modifier/required-input

addon/modifiers/required-input.ts

@@ -1,19 +1,34 @@
-import Modifier from 'ember-modifier';
+import Modifier, { type ArgsFor } from 'ember-modifier';
+import { registerDestructor } from '@ember/destroyable';
 
 interface RequiredInputSignature {
   Element: HTMLElement;
 }
 
 export default class RegisterFormField extends Modifier<RequiredInputSignature> {
   declare targetElement: HTMLElement;
+  markerElement?: HTMLSpanElement;
+
+  constructor(owner: unknown, args: ArgsFor<RequiredInputSignature>) {
+    super(owner, args);
+    registerDestructor(this, () => this.cleanup());
+  }
 
   modify(element: HTMLElement): void {
     this.targetElement = element;
 
+    this.cleanup();
+
     const span = document.createElement('span');
     span.classList.add('font-color-error-500');
     span.textContent = '*';
+    this.markerElement = span;
 
     element.appendChild(span);
   }
+
+  private cleanup(): void {
+    this.markerElement?.remove();
+    this.markerElement = undefined;
+  }
 }

tests/integration/helpers/required-input-test.ts

@@ -47,4 +47,21 @@ module('Integration | Helper | required-input', function (hooks) {
     assert.dom('label span.existing.font-color-error-500').doesNotExist();
     assert.dom('label span.font-color-error-500').exists();
   });
+
+  test('it keeps one asterisk when the modifier is removed and re-added in the same render cycle', async function (assert) {
+    this.isRequired = true;
+
+    await render(hbs`
+      <label {{(if this.isRequired (modifier "required-input"))}}>Conditionally required</label>
+    `);
+    assert.dom('label span.font-color-error-500').exists({ count: 1 });
+
+    this.set('isRequired', false);
+    await settled();
+    assert.dom('label span.font-color-error-500').doesNotExist();
+
+    this.set('isRequired', true);
+    await settled();
+    assert.dom('label span.font-color-error-500').exists({ count: 1 });
+  });
 });