ICEfaces
  1. ICEfaces
  2. ICE-9244

autoCompleteEntry - when Height is specified, click on scrollbox close it without selection

          Details

          • Type: Bug Bug
          • Status: Closed
          • Priority: Major Major
          • Resolution: Fixed
          • Affects Version/s: 3.3
          • Fix Version/s: EE-3.3.0.GA, 4.0.BETA, 4.0
          • Component/s: ACE-Components
          • Labels:
            None
          • Environment:
            Internet explorer (version 8)
          • Assignee Priority:
            P1
          • ICEsoft Forum Reference:
          • Workaround Exists:
            Yes
          • Workaround Description:
            Hide
            Also I found a solution. I chnaged part of autocompleteentry.js :

            Current:
             onBlur: function(event) {
                    var input = ice.ace.jq(this.element);
                    if (ice.ace.jq.trim(input.val()) == "" && this.cfg.inFieldLabel) {
                        input.val(this.cfg.inFieldLabel);
                        input.addClass(this.cfg.inFieldLabelStyleClass);
                        input.data("labelIsInField", true);
                    }
                    if (navigator.userAgent.indexOf("MSIE") >= 0) { // ICE-2225
                        var strictMode = document.compatMode && document.compatMode == "CSS1Compat";
                        var docBody = strictMode ? document.documentElement : document.body;
                        // Right or bottom border, if any, will be treated as scrollbar.
                        // No way to determine their width or scrollbar width accurately.
                        if (event.clientX > docBody.clientLeft + docBody.clientWidth ||
                            event.clientY > docBody.clientTop + docBody.clientHeight) {
                            this.element.focus();
                            return;
                        }
                    }
            ...

            Fix:

                onBlur: function(event) {
                    var input = ice.ace.jq(this.element);
                    if (ice.ace.jq.trim(input.val()) == "" && this.cfg.inFieldLabel) {
                        input.val(this.cfg.inFieldLabel);
                        input.addClass(this.cfg.inFieldLabelStyleClass);
                        input.data("labelIsInField", true);
                    }
                    if (navigator.userAgent.indexOf("MSIE") >= 0) { // ICE-2225
                        var strictMode = document.compatMode && document.compatMode == "CSS1Compat";
                        var docBody = strictMode ? document.documentElement : document.body;
                        //FIX is height is set and user click on scrollbar. If height is not set, value=auto
                     var n=this.height;
                     if (n!=null && n!='' && typeof n === 'number' && n % 1 == 0) {
                            var posx=0; var posy=0;
                            var e = window.event;
                         if (e.pageX || e.pageY) {
                         posx = e.pageX;
                         posy = e.pageY;
                         } else if (e.clientX || e.clientY) {
                         posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                         posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                         }
                         var widthX=input.position().left+input.width();
                         var heightX=input.position().top+input.height()+parseFloat(this.height)+10;
            if ( (posx>input.position().left && posx<=widthX) && (posy>input.position().top && posy<heightX) ) {
            this.element.focus();
            return;
            }
                     }
                        // Right or bottom border, if any, will be treated as scrollbar.
                        // No way to determine their width or scrollbar width accurately.
                        if (event.clientX > docBody.clientLeft + docBody.clientWidth ||
                            event.clientY > docBody.clientTop + docBody.clientHeight) {
                            this.element.focus();
                            return;
                        }
                    }
            ...
            Show
            Also I found a solution. I chnaged part of autocompleteentry.js : Current:  onBlur: function(event) {         var input = ice.ace.jq(this.element);         if (ice.ace.jq.trim(input.val()) == "" && this.cfg.inFieldLabel) {             input.val(this.cfg.inFieldLabel);             input.addClass(this.cfg.inFieldLabelStyleClass);             input.data("labelIsInField", true);         }         if (navigator.userAgent.indexOf("MSIE") >= 0) { // ICE-2225             var strictMode = document.compatMode && document.compatMode == "CSS1Compat";             var docBody = strictMode ? document.documentElement : document.body;             // Right or bottom border, if any, will be treated as scrollbar.             // No way to determine their width or scrollbar width accurately.             if (event.clientX > docBody.clientLeft + docBody.clientWidth ||                 event.clientY > docBody.clientTop + docBody.clientHeight) {                 this.element.focus();                 return;             }         } ... Fix:     onBlur: function(event) {         var input = ice.ace.jq(this.element);         if (ice.ace.jq.trim(input.val()) == "" && this.cfg.inFieldLabel) {             input.val(this.cfg.inFieldLabel);             input.addClass(this.cfg.inFieldLabelStyleClass);             input.data("labelIsInField", true);         }         if (navigator.userAgent.indexOf("MSIE") >= 0) { // ICE-2225             var strictMode = document.compatMode && document.compatMode == "CSS1Compat";             var docBody = strictMode ? document.documentElement : document.body;             //FIX is height is set and user click on scrollbar. If height is not set, value=auto          var n=this.height;          if (n!=null && n!='' && typeof n === 'number' && n % 1 == 0) {                 var posx=0; var posy=0;                 var e = window.event;              if (e.pageX || e.pageY) {              posx = e.pageX;              posy = e.pageY;              } else if (e.clientX || e.clientY) {              posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;              posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;              }              var widthX=input.position().left+input.width();              var heightX=input.position().top+input.height()+parseFloat(this.height)+10; if ( (posx>input.position().left && posx<=widthX) && (posy>input.position().top && posy<heightX) ) { this.element.focus(); return; }          }             // Right or bottom border, if any, will be treated as scrollbar.             // No way to determine their width or scrollbar width accurately.             if (event.clientX > docBody.clientLeft + docBody.clientWidth ||                 event.clientY > docBody.clientTop + docBody.clientHeight) {                 this.element.focus();                 return;             }         } ...

            Description

            If on <ace:autoCompleteEntry> we specify height, and scrollbox with some values appear, if we click on scrollbox, it is automatically closed.

            This issue occur on IE. On Firefox working OK.

            I investigated this issue and problem is that when we click on scrollbox, onblur event is fired (on IE).

              Issue Links

              depends on

              Bug - A problem which impairs or prevents the functions of the product. ICE-9303 ICEfaces JS extends native prototypes overwriting expected behaviours

              • Major - Major loss of function.
              • Closed

                Activity

                Ascending order - Click to sort in descending order
                Hide
                Permalink
                Zoran Djuric added a comment -

                Please apply same fix for ace:combobox, same location (onblur) method in combobox.js.

                Here is complete Onblur method for combobox.js

                onBlur: function(event) {
                var self = this;
                if (navigator.userAgent.indexOf("MSIE") >= 0) {
                //FIX is height is set and user click on scrollbar. If height is not set, value=auto
                var n=this.height;
                if (n!=null && n!='' && typeof n === 'number' && n % 1 == 0) {
                var $box = this.root.find('.ui-combobox-value');
                var box = ice.ace.jq($box.get(0));
                var posx=0; var posy=0;
                var e = window.event;
                if (e.pageX || e.pageY)

                { posx = e.pageX; posy = e.pageY; }

                else if (e.clientX || e.clientY)

                { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; }


                var offset = box.offset();
                var boxTop = offset.top;
                var boxLeft = offset.left;
                var widthX=boxLeft+box.width()+20;
                var heightX=boxTop+box.height()+parseFloat(this.height)+20;

                if ( (posx>boxLeft && posx<=widthX) && (posy>boxTop && posy<heightX) )

                { this.element.focus(); return; }

                }
                }

                this.hideObserver = setTimeout(function () { // needed to make click events work
                self.hide();
                var element = ice.ace.jq(self.element);
                if (ice.ace.jq.trim(self.element.value) == '' && self.cfg.inFieldLabel)

                { self.element.value = self.cfg.inFieldLabel; element.addClass(self.cfg.inFieldLabelStyleClass); element.data("labelIsInField", true); }

                }, 400);
                this.hasFocus = false;
                setFocus('');
                if (this.ajaxBlur) {
                if (this.blurObserver) clearTimeout(this.blurObserver);
                this.ajaxBlur.params = this.ajaxBlur.params || {};
                var self = this;
                this.blurObserver = setTimeout(function() { try

                {ice.ace.ab(self.ajaxBlur);}

                catch(e){} }, 390);
                }
                },

                Show
                Zoran Djuric added a comment - Please apply same fix for ace:combobox, same location (onblur) method in combobox.js. Here is complete Onblur method for combobox.js onBlur: function(event) { var self = this; if (navigator.userAgent.indexOf("MSIE") >= 0) { //FIX is height is set and user click on scrollbar. If height is not set, value=auto var n=this.height; if (n!=null && n!='' && typeof n === 'number' && n % 1 == 0) { var $box = this.root.find('.ui-combobox-value'); var box = ice.ace.jq($box.get(0)); var posx=0; var posy=0; var e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } var offset = box.offset(); var boxTop = offset.top; var boxLeft = offset.left; var widthX=boxLeft+box.width()+20; var heightX=boxTop+box.height()+parseFloat(this.height)+20; if ( (posx>boxLeft && posx<=widthX) && (posy>boxTop && posy<heightX) ) { this.element.focus(); return; } } } this.hideObserver = setTimeout(function () { // needed to make click events work self.hide(); var element = ice.ace.jq(self.element); if (ice.ace.jq.trim(self.element.value) == '' && self.cfg.inFieldLabel) { self.element.value = self.cfg.inFieldLabel; element.addClass(self.cfg.inFieldLabelStyleClass); element.data("labelIsInField", true); } }, 400); this.hasFocus = false; setFocus(''); if (this.ajaxBlur) { if (this.blurObserver) clearTimeout(this.blurObserver); this.ajaxBlur.params = this.ajaxBlur.params || {}; var self = this; this.blurObserver = setTimeout(function() { try {ice.ace.ab(self.ajaxBlur);} catch(e){} }, 390); } },
                Hide
                Permalink
                Arturo Zambrano added a comment -

                Committed fix at revision 35545. Applied fix described above and tested it.

                Show
                Arturo Zambrano added a comment - Committed fix at revision 35545. Applied fix described above and tested it.
                Hide
                Permalink
                Arturo Zambrano added a comment -

                Revision 35578. Applied fix to ace:comboBox and ace:selectMenu. Refactored code in ace:autoCompleteEntry.

                Show
                Arturo Zambrano added a comment - Revision 35578. Applied fix to ace:comboBox and ace:selectMenu. Refactored code in ace:autoCompleteEntry.
                Hide
                Permalink
                Arturo Zambrano added a comment -

                Closing issue again. The regressions reported above weren't caused by these fixes but by a fix made for ICE-9109, which is now being investigated in ICE-9303.

                Show
                Arturo Zambrano added a comment - Closing issue again. The regressions reported above weren't caused by these fixes but by a fix made for ICE-9109 , which is now being investigated in ICE-9303 .

                  People

                  • Assignee:
                    Arturo Zambrano
                    Reporter:
                    Zoran Djuric
                  • Votes:
                    0 Vote for this issue
                    Watchers:
                    3 Start watching this issue

                    Dates

                    • Created:
                      Updated:
                      Resolved: