fix(core): Fix sticky-headers in react

app/scripts/modules/core/delivery/executionGroup/ExecutionGroups.tsx

@@ -32,13 +32,7 @@ export class ExecutionGroups extends React.Component<IProps, IState> {
       groups: executionFilterModel.groups,
       showingDetails: this.showingDetails()
     }
-  }
-
-  private showingDetails(): boolean {
-    return $state.includes('**.execution');
-  }
 
-  public componentDidMount(): void {
     this.applicationRefreshUnsubscribe = this.props.application.executions.onRefresh(null, () => { this.forceUpdate(); });
     this.groupsUpdatedSubscription = executionFilterModel.groupsUpdated.subscribe(() => { this.setState({groups: executionFilterModel.groups}); });
     this.stateChangeSuccessSubscription = stateEvents.stateChangeSuccess.subscribe(() => {
@@ -49,6 +43,10 @@ export class ExecutionGroups extends React.Component<IProps, IState> {
     });
   }
 
+  private showingDetails(): boolean {
+    return $state.includes('**.execution');
+  }
+
   public componentWillUnmount(): void {
     if (this.applicationRefreshUnsubscribe) {
       this.applicationRefreshUnsubscribe();

app/scripts/modules/core/utils/stickyHeader/Sticky.tsx

@@ -53,16 +53,15 @@ export class Sticky extends React.Component<IProps, IState> {
       return;
     }
 
+    this.recomputeState = throttle(this.recomputeState, 50, {trailing: true});
+  }
 
-    this.stickySubscription = context.stickyContainer.elementMounted.subscribe((element: HTMLElement) => {
+  private setContainerElement(element: HTMLElement): void {
       this.stickyContainerElement = element;
       if (!this.props.stickyIf || this.props.stickyIf()) {
         this.addEventListeners(this.recomputeState);
         this.recomputeState();
       }
-    });
-
-    this.recomputeState = throttle(this.recomputeState, 50, {trailing: true});
   }
 
   private outerHeight(el: HTMLElement): number {
@@ -128,7 +127,6 @@ export class Sticky extends React.Component<IProps, IState> {
       Sticky.RECOMPUTE_EVENTS.forEach((event) => {
         this.stickyContainerElement.addEventListener(event, callback);
       });
-      this.recomputeState();
     }
   }
 
@@ -144,6 +142,14 @@ export class Sticky extends React.Component<IProps, IState> {
     this.stickyElement = element;
   }
 
+  public componentDidMount(): void {
+    if (this.context.stickyContainer.element) {
+      this.setContainerElement(this.context.stickyContainer.element);
+    } else {
+      this.stickySubscription = this.context.stickyContainer.elementMounted.subscribe(this.setContainerElement);
+    }
+  }
+
   public componentWillReceiveProps(nextProps: IProps): void {
     if (nextProps.stickyIf !== this.props.stickyIf) {
       if (nextProps.stickyIf) {

app/scripts/modules/core/utils/stickyHeader/StickyContainer.tsx

@@ -13,6 +13,7 @@ export class StickyContainer extends React.Component<any, any> {
     stickyContainer: PropTypes.any
   };
 
+  public element: HTMLElement;
   public elementMounted: Subject<HTMLDivElement> = new Subject<HTMLDivElement>();
   private elementMountedAlready = false;
 
@@ -21,6 +22,7 @@ export class StickyContainer extends React.Component<any, any> {
   }
 
   public refCallback(element: HTMLDivElement): void {
+    this.element = element;
     if (!this.elementMountedAlready) {
       this.elementMounted.next(element);
       this.elementMountedAlready = true;