fix(atomic): reset dependent numeric / date facet input when parent facet is cleared

packages/atomic/src/components/common/facets/timeframe-facet-common.tsx

@@ -46,7 +46,7 @@ interface TimeframeFacetCommonOptions {
   withDatePicker: boolean;
   setFacetId(id: string): string;
   getSearchStatusState(): SearchStatusState;
-  buildDependenciesManager(): FacetConditionsManager;
+  buildDependenciesManager(facetId: string): FacetConditionsManager;
   deserializeRelativeDate(date: string): RelativeDate;
   buildDateRange(config: DateRangeOptions): DateRangeRequest;
   initializeFacetForDatePicker(): DateFacet;
@@ -71,7 +71,9 @@ export class TimeframeFacetCommon {
   private facetForDateRange?: DateFacet;
   private filter?: DateFilter;
   private manualTimeframes: Timeframe[] = [];
-  private dependenciesManager?: FacetConditionsManager;
+  private facetForDateRangeDependenciesManager?: FacetConditionsManager;
+  private facetForDatePickerDependenciesManager?: FacetConditionsManager;
+  private filterDependenciesManager?: FacetConditionsManager;
 
   constructor(private props: TimeframeFacetCommonOptions) {
     this.facetId = this.determineFacetId;
@@ -92,12 +94,26 @@ export class TimeframeFacetCommon {
 
     if (this.props.withDatePicker) {
       this.facetForDatePicker = this.props.initializeFacetForDatePicker();
+      this.facetForDatePickerDependenciesManager =
+        this.props.buildDependenciesManager(
+          this.facetForDatePicker.state.facetId
+        );
       this.filter = this.props.initializeFilter();
     }
 
-    if (this.facetForDateRange || this.filter) {
-      this.dependenciesManager = this.props.buildDependenciesManager();
+    if (this.facetForDateRange) {
+      this.facetForDateRangeDependenciesManager =
+        this.props.buildDependenciesManager(
+          this.facetForDateRange?.state.facetId
+        );
     }
+
+    if (this.filter) {
+      this.filterDependenciesManager = this.props.buildDependenciesManager(
+        this.filter?.state.facetId
+      );
+    }
+
     this.registerFacetToStore();
   }
 
@@ -188,7 +204,9 @@ export class TimeframeFacetCommon {
     if (this.props.host.isConnected) {
       return;
     }
-    this.dependenciesManager?.stopWatching();
+    this.facetForDateRangeDependenciesManager?.stopWatching();
+    this.facetForDatePickerDependenciesManager?.stopWatching();
+    this.filterDependenciesManager?.stopWatching();
   }
 
   private get isHidden() {

packages/atomic/src/components/insight/atomic-insight-timeframe-facet/atomic-insight-timeframe-facet.tsx

@@ -142,10 +142,9 @@ export class AtomicInsightTimeframeFacet
       dependsOn: this.dependsOn,
       withDatePicker: this.withDatePicker,
       setFacetId: (id: string) => (this.facetId = id),
-      buildDependenciesManager: () =>
+      buildDependenciesManager: (facetId: string) =>
         buildInsightFacetConditionsManager(this.bindings.engine, {
-          facetId:
-            this.facetForDateRange?.state.facetId ?? this.filter!.state.facetId,
+          facetId,
           conditions: parseDependsOn<
             InsightFacetValueRequest | InsightCategoryFacetValueRequest
           >(this.dependsOn),

packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.tsx

@@ -94,7 +94,9 @@ export class AtomicNumericFacet implements InitializableComponent {
   @Element() private host!: HTMLElement;
   private manualRanges: (NumericRangeRequest & {label?: string})[] = [];
   private formatter: NumberFormatter = defaultNumberFormatter;
-  private dependenciesManager?: FacetConditionsManager;
+  private facetForRangeDependenciesManager?: FacetConditionsManager;
+  private facetForInputDependenciesManager?: FacetConditionsManager;
+  private filterDependenciesManager?: FacetConditionsManager;
 
   @BindStateToController('facetForRange')
   @State()
@@ -244,17 +246,17 @@ export class AtomicNumericFacet implements InitializableComponent {
     this.initializeFacetForInput();
     this.initializeFacetForRange();
     this.initializeFilter();
-    this.initializeDependenciesManager();
     this.initializeSearchStatus();
-
     this.registerFacetToStore();
   }
 
   public disconnectedCallback() {
     if (this.host.isConnected) {
       return;
     }
-    this.dependenciesManager?.stopWatching();
+    this.facetForRangeDependenciesManager?.stopWatching();
+    this.facetForInputDependenciesManager?.stopWatching();
+    this.filterDependenciesManager?.stopWatching();
   }
 
   private initializeSearchStatus() {
@@ -284,6 +286,10 @@ export class AtomicNumericFacet implements InitializableComponent {
       },
     });
 
+    this.facetForInputDependenciesManager = this.initializeDependenciesManager(
+      this.facetForInput.state.facetId
+    );
+
     return this.facetForInput;
   }
 
@@ -313,6 +319,10 @@ export class AtomicNumericFacet implements InitializableComponent {
       },
     });
 
+    this.facetForRangeDependenciesManager = this.initializeDependenciesManager(
+      this.facetForRange.state.facetId
+    );
+
     return this.facetForRange;
   }
 
@@ -326,21 +336,21 @@ export class AtomicNumericFacet implements InitializableComponent {
         field: this.field,
       },
     });
-  }
 
-  private initializeDependenciesManager() {
-    this.dependenciesManager = buildFacetConditionsManager(
-      this.bindings.engine,
-      {
-        facetId:
-          this.facetForRange?.state.facetId ?? this.filter!.state.facetId,
-        conditions: parseDependsOn<
-          FacetValueRequest | CategoryFacetValueRequest
-        >(this.dependsOn),
-      }
+    this.filterDependenciesManager = this.initializeDependenciesManager(
+      this.filter.state.facetId
     );
   }
 
+  private initializeDependenciesManager(facetId: string) {
+    return buildFacetConditionsManager(this.bindings.engine, {
+      facetId,
+      conditions: parseDependsOn<FacetValueRequest | CategoryFacetValueRequest>(
+        this.dependsOn
+      ),
+    });
+  }
+
   private registerFacetToStore() {
     const facetInfo: FacetInfo = {
       label: () => this.bindings.i18n.t(this.label),

packages/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.tsx

@@ -232,10 +232,9 @@ export class AtomicTimeframeFacet implements InitializableComponent {
       dependsOn: parseDependsOn(this.dependsOn) && this.dependsOn,
       withDatePicker: this.withDatePicker,
       setFacetId: (id: string) => (this.facetId = id),
-      buildDependenciesManager: () =>
+      buildDependenciesManager: (facetId: string) =>
         buildFacetConditionsManager(this.bindings.engine, {
-          facetId:
-            this.facetForDateRange?.state.facetId ?? this.filter!.state.facetId,
+          facetId,
           conditions: parseDependsOn<
             FacetValueRequest | CategoryFacetValueRequest
           >(this.dependsOn),