From 06f6fa8524a905ec8027b8ba756eb199f2591336 Mon Sep 17 00:00:00 2001 From: meh-cfl Date: Mon, 28 Nov 2011 16:33:23 -0500 Subject: [PATCH 1/5] Autocomplete: Don't invoke a search from arrow keys when the element can have multi-line text. Fixes #7639 - Key up/key down in textarea's should optionally not toggle auto-complete. --- tests/unit/autocomplete/autocomplete_core.js | 86 ++++++++++++++++++++ ui/jquery.ui.autocomplete.js | 26 +++--- 2 files changed, 100 insertions(+), 12 deletions(-) diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js index 3f92aa01f43..d98f56abf6f 100644 --- a/tests/unit/autocomplete/autocomplete_core.js +++ b/tests/unit/autocomplete/autocomplete_core.js @@ -80,4 +80,90 @@ test( "allow form submit on enter when menu is not active", function() { ok( !event.isDefaultPrevented(), "default action is prevented" ); }); +(function() { + test( "up arrow invokes search - input", function() { + arrowsInvokeSearch( "#autocomplete", true, true ); + }); + + test( "down arrow invokes search - input", function() { + arrowsInvokeSearch( "#autocomplete", false, true ); + }); + + test( "up arrow invokes search - textarea", function() { + arrowsInvokeSearch( "#autocomplete-textarea", true, false ); + }); + + test( "down arrow invokes search - textarea", function() { + arrowsInvokeSearch( "#autocomplete-textarea", false, false ); + }); + + test( "up arrow invokes search - contenteditable", function() { + arrowsInvokeSearch( "#autocomplete-contenteditable", true, false ); + }); + + test( "down arrow invokes search - contenteditable", function() { + arrowsInvokeSearch( "#autocomplete-contenteditable", false, false ); + }); + + test( "up arrow moves focus - input", function() { + arrowsMoveFocus( "#autocomplete", true ); + }); + + test( "down arrow moves focus - input", function() { + arrowsMoveFocus( "#autocomplete", false ); + }); + + test( "up arrow moves focus - textarea", function() { + arrowsMoveFocus( "#autocomplete-textarea", true ); + }); + + test( "down arrow moves focus - textarea", function() { + arrowsMoveFocus( "#autocomplete-textarea", false ); + }); + + test( "up arrow moves focus - contenteditable", function() { + arrowsMoveFocus( "#autocomplete-contenteditable", true ); + }); + + test( "down arrow moves focus - contenteditable", function() { + arrowsMoveFocus( "#autocomplete-contenteditable", false ); + }); + + function arrowsInvokeSearch( id, isKeyUp, shouldMove ) { + expect( 1 ); + + var didMove = false, + element = $( id ).autocomplete({ + source: [ "a" ], + delay: 0, + minLength: 0 + }); + element.data( "autocomplete" )._move = function() { + didMove = true; + }; + element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } ); + equal( didMove, shouldMove, "respond to arrow" ); + } + + function arrowsMoveFocus( id, isKeyUp ) { + expect( 1 ); + + var didMove = false, + element = $( id ).autocomplete({ + source: [ "a" ], + delay: 0, + minLength: 0 + }); + element.data( "autocomplete" )._move = function() { + ok( true, "repsond to arrow" ); + }; + element.autocomplete( "search" ); + element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } ); + } +})(); + +(function() { + +})(); + }( jQuery ) ); diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js index dbda2058ed8..bd415aa2bb8 100644 --- a/ui/jquery.ui.autocomplete.js +++ b/ui/jquery.ui.autocomplete.js @@ -58,6 +58,7 @@ $.widget( "ui.autocomplete", { suppressKeyPressRepeat, suppressInput; + this.isMultiLine = this.element.is( "textarea,[contenteditable]" ); this.valueMethod = this.element[ this.element.is( "input,textarea" ) ? "val" : "text" ]; this.element @@ -92,15 +93,11 @@ $.widget( "ui.autocomplete", { break; case keyCode.UP: suppressKeyPress = true; - self._move( "previous", event ); - // prevent moving cursor to beginning of text field in some browsers - event.preventDefault(); + self._keyEvent( "previous", event ); break; case keyCode.DOWN: suppressKeyPress = true; - self._move( "next", event ); - // prevent moving cursor to end of text field in some browsers - event.preventDefault(); + self._keyEvent( "next", event ); break; case keyCode.ENTER: case keyCode.NUMPAD_ENTER: @@ -151,14 +148,10 @@ $.widget( "ui.autocomplete", { self._move( "nextPage", event ); break; case keyCode.UP: - self._move( "previous", event ); - // prevent moving cursor to beginning of text field in some browsers - event.preventDefault(); + self._keyEvent( "previous", event ); break; case keyCode.DOWN: - self._move( "next", event ); - // prevent moving cursor to end of text field in some browsers - event.preventDefault(); + self._keyEvent( "next", event ); break; } }) @@ -495,6 +488,15 @@ $.widget( "ui.autocomplete", { _value: function( value ) { return this.valueMethod.apply( this.element, arguments ); + }, + + _keyEvent: function( keyEvent, event ) { + if ( !this.isMultiLine || this.menu.element.is( ":visible" ) ) { + this._move( keyEvent, event ); + + // prevents moving cursor to beginning/end of the text field in some browsers + event.preventDefault(); + } } }); From ce0afde900fb2b55b5766a3e0e3029e24a094a75 Mon Sep 17 00:00:00 2001 From: James Khoury Date: Mon, 28 Nov 2011 16:52:10 -0500 Subject: [PATCH 2/5] Dialog: Modified the dialog._size() to use outerHeight in calculating the nonContentHeight. Fixed #7692 - dialog: dialog height bug is incorrect when .ui-dialog padding set. --- tests/unit/dialog/dialog_options.js | 13 +++++++++---- ui/jquery.ui.dialog.js | 2 +- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/tests/unit/dialog/dialog_options.js b/tests/unit/dialog/dialog_options.js index eab577c6998..264c2fb6ee1 100644 --- a/tests/unit/dialog/dialog_options.js +++ b/tests/unit/dialog/dialog_options.js @@ -177,19 +177,24 @@ test("draggable", function() { }); test("height", function() { - expect(3); + expect(4); el = $('
').dialog(); - equals(dlg().height(), 150, "default height"); + equals(dlg().outerHeight(), 150, "default height"); el.remove(); el = $('
').dialog({ height: 237 }); - equals(dlg().height(), 237, "explicit height"); + equals(dlg().outerHeight(), 237, "explicit height"); el.remove(); el = $('
').dialog(); el.dialog('option', 'height', 238); - equals(dlg().height(), 238, "explicit height set after init"); + equals(dlg().outerHeight(), 238, "explicit height set after init"); + el.remove(); + + el = $('
').css("padding", "20px") + .dialog({ height: 240 }); + equals(dlg().outerHeight(), 240, "explicit height with padding"); el.remove(); }); diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js index 49ef8f64b2f..3d7638667d9 100644 --- a/ui/jquery.ui.dialog.js +++ b/ui/jquery.ui.dialog.js @@ -625,7 +625,7 @@ $.widget("ui.dialog", { height: "auto", width: options.width }) - .height(); + .outerHeight(); minContentHeight = Math.max( 0, options.minHeight - nonContentHeight ); if ( options.height === "auto" ) { From 439f877516f4f1c32481f95e59380efc3fdfa454 Mon Sep 17 00:00:00 2001 From: Rob Loach Date: Mon, 28 Nov 2011 18:57:57 -0500 Subject: [PATCH 3/5] Remove whitespace at the end of the Dialog title CSS definition. --- themes/base/jquery.ui.dialog.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/base/jquery.ui.dialog.css b/themes/base/jquery.ui.dialog.css index 12609ed1923..c3a1d85ea08 100644 --- a/themes/base/jquery.ui.dialog.css +++ b/themes/base/jquery.ui.dialog.css @@ -9,7 +9,7 @@ */ .ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; } .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } -.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } +.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; } .ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; } .ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; } From a3a5c65d4dd9eb6be0e8a71d82c3ca86b38ed009 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Tue, 29 Nov 2011 15:01:04 -0500 Subject: [PATCH 4/5] Button: Apply overflow: hidden in all browsers except IE 6,7 to avoid expanding the size of the button from negative text indent. Fixes #7911 - Button: icon only button in dialog causes horizontal scrollbar in Opera. --- themes/base/jquery.ui.button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/base/jquery.ui.button.css b/themes/base/jquery.ui.button.css index 0d11065f4de..2ae50afd111 100644 --- a/themes/base/jquery.ui.button.css +++ b/themes/base/jquery.ui.button.css @@ -7,7 +7,7 @@ * * http://docs.jquery.com/UI/Button#theming */ -.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */ +.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: hidden; *overflow: visible; } /* the overflow property removes extra width in IE */ .ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */ button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */ .ui-button-icons-only { width: 3.4em; } From afdc577e9c26d6571e934a8fef892f7fbe3619c6 Mon Sep 17 00:00:00 2001 From: kborchers Date: Wed, 30 Nov 2011 08:39:10 -0600 Subject: [PATCH 5/5] Menu: Remove the isScrolling check which nolonger seems necessary. --- ui/jquery.ui.menu.js | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 4fe859f4eac..77190189e7d 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -29,7 +29,6 @@ $.widget( "ui.menu", { }, _create: function() { this.activeMenu = this.element; - this.isScrolling = false; this.menuId = this.element.attr( "id" ) || "ui-menu-" + idIncrement++; if ( this.element.find( ".ui-icon" ).length ) { this.element.addClass( "ui-menu-icons" ); @@ -66,13 +65,10 @@ $.widget( "ui.menu", { }, "mouseover .ui-menu-item": function( event ) { event.stopImmediatePropagation(); - if ( !this.isScrolling ) { - var target = $( event.currentTarget ); - // Remove ui-state-active class from siblings of the newly focused menu item to avoid a jump caused by adjacent elements both having a class with a border - target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" ); - this.focus( event, target ); - } - this.isScrolling = false; + var target = $( event.currentTarget ); + // Remove ui-state-active class from siblings of the newly focused menu item to avoid a jump caused by adjacent elements both having a class with a border + target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" ); + this.focus( event, target ); }, "mouseleave": "collapseAll", "mouseleave .ui-menu": "collapseAll", @@ -86,10 +82,6 @@ $.widget( "ui.menu", { this.collapseAll( event ); } }, 0); - }, - scroll: function( event ) { - // Keep track of scrolling to prevent mouseover from firing inadvertently when scrolling the menu - this.isScrolling = true; } });