Overriding the RichFaces PopupPanel.doResizeOrMove method without changes causes inconsistent behavior

Question

I'm overriding the RichFaces PopupPanel.doResizeOrMove method as follows:

(function() {
  var richfacesUiPopupPanelDoResizeOrMove = RichFaces.ui.PopupPanel.prototype.doResizeOrMove;      
  RichFaces.ui.PopupPanel.prototype.doResizeOrMove = function(diff) {
      richfacesUiPopupPanelDoResizeOrMove.call(this, diff);
  };
})();

Eventually I want to add some additional functionality, hence the override. But with the code above I'm expecting the same behavior as with the original method.

However, the PopupPanel quickly moves out of the viewport when I start moving it. Is this a known problem with javascript overriding via call (I'm getting the same behavior via apply) or some RichFaces specific problem? what am I doing wrong?

Thanks

Answer 1

The doResizeOrMove method has a return value which gets lost in your implementation. It should be

return richfacesUiPopupPanelDoResizeOrMove.call(this, diff);

While rewriting the prototype will work, you may want to take a look at $.extend(), that's what we use to build the components.

(function() {            
    var richfacesUiPopupPanelDoResizeOrMove = RichFaces.ui.PopupPanel.prototype.doResizeOrMove;      
    $.extend(RichFaces.ui.PopupPanel.prototype, (function(options) {
        return {
            doResizeOrMove: function(diff) {
                return richfacesUiPopupPanelDoResizeOrMove.call(this, diff);
            }
        };
     })());        
 })();