fix: onChange is not mandatory + mobile phone is not reset when change other value from form

doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-mobile-test.gts

@@ -12,6 +12,7 @@ import { ImmerChangeset } from 'ember-immer-changeset';
 import { setupIntl } from 'ember-intl/test-support';
 import { selectChoose } from 'ember-power-select/test-support';
 import TpkValidationMobile from '@triptyk/ember-input-validation/components/prefabs/tpk-validation-mobile';
+import TpkValidationInput from '@triptyk/ember-input-validation/components/prefabs/tpk-validation-input';
 
 interface ThisTestContext extends TestContext {
 
@@ -26,8 +27,9 @@ module(
     async function setChangeset(
       this: TestContext,
       phoneValue: string = '+33712345678',
+      overrides: Record<string, unknown> = {},
     ) {
-      return new ImmerChangeset({ phone: phoneValue });
+      return new ImmerChangeset({ phone: phoneValue, ...overrides });
     }
 
     async function renderComponent(changeset: ImmerChangeset) {
@@ -36,6 +38,15 @@ module(
       );
     }
 
+    async function renderComponentWithOtherInput(changeset: ImmerChangeset) {
+      await render<ThisTestContext>(
+        <template>
+          <TpkValidationMobile @changeset={{changeset}} @validationField="phone" @label="Numéro de téléphone" />
+          <TpkValidationInput class="text-element" @changeset={{changeset}} @validationField="text" @label="Texte" />
+        </template>,
+      );
+    }
+
     test('Should split country prefixe and phone number and show label', async function (assert) {
       const changeset = await setChangeset.call(this);
       await renderComponent(changeset);
@@ -73,7 +84,20 @@ module(
       await click(document.body); // click outside to trigger update of mask only for test
       assert.dom('.ember-power-select-selected-item').containsText('+352');
       assert.dom('input').hasValue('123 456 789');
-      console.log(changeset.get('phone'));
+      assert.strictEqual(changeset.get('phone'), '+352123456789');
+    });
+
+    test('When change value for an another input, mask input for mobile is not reset', async function (this: ThisTestContext, assert) {
+      const changeset = await setChangeset.call(this, '', { text: '123' });
+      await renderComponentWithOtherInput(changeset);
+      await selectChoose('.ember-power-select-trigger', '+352');
+      await fillIn('.tpk-input-validation-mobile input', '123456789');
+      await click(document.body); // click outside to trigger update of mask only for test
+      assert.dom('.ember-power-select-selected-item').containsText('+352');
+      assert.dom('.tpk-input-validation-mobile input').hasValue('123 456 789');
+      await fillIn('.text-element input', '456');
+      assert.dom('.tpk-input-validation-mobile input').hasValue('123 456 789');
+
       assert.strictEqual(changeset.get('phone'), '+352123456789');
     });
 

packages/ember-input-validation/src/components/prefabs/tpk-validation-mobile.gts

@@ -128,45 +128,44 @@ export default class TpkValidationMobilePrefabComponent extends BaseValidationCo
       @unmaskValue={{true}}
       as |I|
     >
-      <div class="tpk-input" anchorScrollUp={{@validationField}} data-test-tpk-input data-has-error='{{this.hasError}}' ...attributes>
-      <I.Label
-        class='tpk-input-validation-label'
-        data-test-label-not-yielded
-      >
-        <MandatoryLabelComponent @label={{@label}} @mandatory={{this.mandatory}} />
-      </I.Label>
       <div
-        class='tpk-input-validation-mobile'
-        data-test-mobile-validation
+        class='tpk-input'
+        anchorScrollUp={{@validationField}}
+        data-test-tpk-input
+        data-has-error='{{this.hasError}}'
+        ...attributes
       >
-        <TpkSelectComponent
-          @label=''
-          @options={{this.prefixes}}
-          @selected={{this.selectedPrefix}}
-          @onChange={{this.onChangeValuePrefix}}
-
-          as |T|
-        >
-          <T.Option as |O|>
-            <div class='flag'>
-              <img
-                alt={{this.getValueFromOption O.option 'code'}}
-                src={{this.getValueFromOption O.option 'flag'}}
-                width='20'
-              />
-              <div>
-                {{this.getValueFromOption O.option 'code'}}
+        <I.Label class='tpk-input-validation-label' data-test-label-not-yielded>
+          <MandatoryLabelComponent
+            @label={{@label}}
+            @mandatory={{this.mandatory}}
+          />
+        </I.Label>
+        <div class='tpk-input-validation-mobile' data-test-mobile-validation>
+          <TpkSelectComponent
+            @label=''
+            @options={{this.prefixes}}
+            @selected={{this.selectedPrefix}}
+            @onChange={{this.onChangeValuePrefix}}
+            as |T|
+          >
+            <T.Option as |O|>
+              <div class='flag'>
+                <img
+                  alt={{this.getValueFromOption O.option 'code'}}
+                  src={{this.getValueFromOption O.option 'flag'}}
+                  width='20'
+                />
+                <div>
+                  {{this.getValueFromOption O.option 'code'}}
+                </div>
               </div>
-            </div>
-          </T.Option>
-        </TpkSelectComponent>
-        <I.Input inputmode='tel' />
+            </T.Option>
+          </TpkSelectComponent>
+          <I.Input inputmode='tel' />
+        </div>
+        <TpkValidationErrorsComponent @errors={{this.errors}} />
       </div>
-      <TpkValidationErrorsComponent
-        @errors={{this.errors}}
-
-      />
-          </div>
     </TpkInputComponent>
   </template>
 }

packages/ember-input/src/components/tpk-input/input.gts

@@ -32,6 +32,13 @@ export interface TpkInputInputComponentSignature {
 export default class TpkInputInputComponent extends Component<TpkInputInputComponentSignature> {
   @tracked mask?: InputMask<FactoryArg>;
 
+  get value() {
+    if (this.mask) {
+      return this.mask.value;
+    }
+    return this.args.value;
+  }
+
   @action onChange(e: Event): void {
     e.preventDefault();
     let value = this.inputValue(e.target as HTMLInputElement);
@@ -41,7 +48,7 @@ export default class TpkInputInputComponent extends Component<TpkInputInputCompo
     this.args.onChange?.(value, e);
   }
 
-    private inputValue(input: HTMLInputElement) {
+  private inputValue(input: HTMLInputElement) {
     if (this.args.type === 'number') {
       return input.valueAsNumber;
     }
@@ -53,7 +60,6 @@ export default class TpkInputInputComponent extends Component<TpkInputInputCompo
     return input.value;
   }
 
-
   @action
   setMask(element: HTMLInputElement) {
     if (!this.args.mask) return;
@@ -71,7 +77,7 @@ export default class TpkInputInputComponent extends Component<TpkInputInputCompo
       step={{@step}}
       max={{@max}}
       type={{@type}}
-      value={{@value}}
+      value={{this.value}}
       disabled={{@disabled}}
       placeholder={{@placeholder}}
       {{didInsert this.setMask}}