pfVerticalNavigation doesn't hide/show correctly when resizing

[lnewson]

When resizing a browser window from a tablet size window (<768px), to something larger the vertical navigation remains hidden. On the opposite, when resizing from a large desktop size, to a smaller tablet size window the navigation remains shown and overlays over the content. This is reproducable on Chrome and Firefox at least, using the demo application: https://www.patternfly.org/angular-patternfly/#/api/patternfly.navigation.component:pfVerticalNavigation%20-%20Basic

Inspecting the $ctrl.inMobileState variable, it appears show the correct value, however the class on the element hasn't been updated. This appears to be an issue with version 4.x as 3.25.0 worked fine. Looking at the differences in the code, I see that the 3.x version included some functionality to force a digest to occur, whereas the 4.x version has dropped that:

4.x:

// Need to bind to resize event
angular.element($window).on('resize', function () {
  checkNavState();
});

3.25.0:

angular.element($window).on('resize', function () {
  checkNavState();
  $timeout(function () {
    try {
      $scope.$apply();
    } catch (e) {
      // Ignore, if we already applied, that is fine.
    }
  });
});

Screenshot to show the navigation is hidden after resizing back to fullscreen:

[lnewson]

As a test, I just wrapped the checkNavState() call in a timeout (since $timeout already wraps the function it calls in $apply) and that appeared to fix the issue for me at least. However I'm not sure why this was originally removed, so this might not be an acceptable solution.

// Need to bind to resize event
angular.element($window).on('resize', function () {
  $timeout(function () {
    checkNavState();
  });
});

[lnewson]

Did a bit more looking into this and found https://stackoverflow.com/a/31623803 which mentions that because the resize event handler is outside AngularJS's scope, the event handler will need to trigger a digest otherwise Angular won't process the updates (which makes sense thinking about it). So gave that a go using the following and that appeared to fix the issue as well.

// Need to bind to resize event
angular.element($window).on('resize', function () {
  checkNavState();
  $rootScope.$digest();
});