Fix: Properly handle same inputs\outputs, handle cross-control changes

Author: navix

e2e/tests/playground/select-control.spec.ts

@@ -118,4 +118,27 @@ test.describe.serial('FeSelectDirective', () => {
     await kit.$('#select-11').selectOption({label: 'VAL2'});
     await expect(kit.$('#select-11-touched')).toHaveText('TOUCHED: true');
   });
+
+  test('12 - cross-change, should properly re-set value received from input', async () => {
+    await kit.$('#select-12_1').selectOption({label: 'VAL1'});
+    await expect(kit.$('#select-12_1-input-value')).toHaveText('INPUT_VALUE: "1"');
+    expect(await kit.isSelected('#select-12_1-opt-1')).toBeTruthy();
+    expect(await kit.isSelected('#select-12_2-opt-1')).toBeTruthy();
+    await kit.$('#select-12_2').selectOption({label: 'VAL2'});
+    await expect(kit.$('#select-12_1-model-value')).toHaveText('MODEL_VALUE: "2"');
+    await expect(kit.$('#select-12_1-input-value')).toHaveText('INPUT_VALUE: "2"');
+    expect(await kit.isSelected('#select-12_1-opt-2')).toBeTruthy();
+    await kit.$('#select-12_2').selectOption({label: 'VAL1'});
+    await expect(kit.$('#select-12_1-model-value')).toHaveText('MODEL_VALUE: "1"');
+    await expect(kit.$('#select-12_1-input-value')).toHaveText('INPUT_VALUE: "1"');
+    expect(await kit.isSelected('#select-12_1-opt-1')).toBeTruthy();
+    await kit.$('#select-12_2').selectOption({label: 'VAL2'});
+    await expect(kit.$('#select-12_1-model-value')).toHaveText('MODEL_VALUE: "2"');
+    await expect(kit.$('#select-12_1-input-value')).toHaveText('INPUT_VALUE: "2"');
+    expect(await kit.isSelected('#select-12_1-opt-2')).toBeTruthy();
+    await kit.$('#select-12_1').selectOption({label: 'VAL3'});
+    expect(await kit.isSelected('#select-12_2-opt-3')).toBeTruthy();
+    await kit.$('#select-12_1').selectOption({label: 'VAL2'});
+    expect(await kit.isSelected('#select-12_2-opt-2')).toBeTruthy();
+  });
 });

projects/ngfe/src/lib/core/fe-control.ts

@@ -92,6 +92,10 @@ export class FeControl<MODEL = any, INPUT = any> implements OnChanges, OnDestroy
   @Output() destroy = new EventEmitter<undefined>();
 
   private modelValueOutput?: MODEL;
+  /**
+   * When we emit value from @output with "change" postfix - it will immediately return from @input.
+   * This flag is `true` when we emit value, and should be reset after next input.
+   */
   private modelValueOutputFlag = false;
 
   private readonly _vc$ = new BehaviorSubject<Vc<MODEL, INPUT>>({source: 'initial'});
@@ -190,8 +194,14 @@ export class FeControl<MODEL = any, INPUT = any> implements OnChanges, OnDestroy
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if ('feControl' in changes && (!this.modelValueOutputFlag || this.feControl !== this.modelValueOutput)) {
-      this.update(this.feControl, 'model');
+    if ('feControl' in changes) {
+      if (!this.modelValueOutputFlag || this.feControl !== this.modelValueOutput) {
+        this.update(this.feControl, 'model');
+      }
+      // Reset flag after input
+      if (this.modelValueOutputFlag) {
+        this.modelValueOutputFlag = false;
+      }
     }
     if ('extraValidators' in changes) {
       const prev: FeValidator<MODEL>[] | undefined = changes.extraValidators.previousValue;

projects/playground/src/app/select-control-page/select-control-page.component.html

@@ -153,3 +153,25 @@ <h4>11 - Touch on change</h4>
     TOUCHED: {{ control11.touched | json }}
   </div>
 </div>
+
+<div class="case">
+  <h4>12 - Cross-change</h4>
+  <div>
+    <select [(feControl)]="value12" #control12_1="feControl" id="select-12_1" touchOnChange>
+      <option value="1" id="select-12_1-opt-1">VAL1</option>
+      <option value="2" id="select-12_1-opt-2">VAL2</option>
+      <option value="3">VAL3</option>
+    </select>
+    <select [(feControl)]="value12" #control12_2="feControl" id="select-12_2" touchOnChange>
+      <option value="1" id="select-12_2-opt-1">VAL1</option>
+      <option value="2" id="select-12_2-opt-2">VAL2</option>
+      <option value="3" id="select-12_2-opt-3">VAL3</option>
+    </select>
+  </div>
+  <div id="select-12_1-input-value">
+    INPUT_VALUE: {{ control12_1.inputValue | json }}
+  </div>
+  <div id="select-12_1-model-value">
+    MODEL_VALUE: {{ control12_1.modelValue | json }}
+  </div>
+</div>

projects/playground/src/app/select-control-page/select-control-page.component.ts

@@ -19,4 +19,5 @@ export class SelectControlPageComponent {
   value10 = '1';
   disabled10 = false;
   value11 = '';
+  value12 = '';
 }