jenkins-bot has submitted this change and it was merged.

Change subject: CapsuleMultiSelectWidget: Always keep input as wide as 
placeholder text
......................................................................


CapsuleMultiSelectWidget: Always keep input as wide as placeholder text

Follows up If665d261ddba54b8b237c5c3080ecfdc05b14e11

Bug: T147813
Change-Id: Ia7b66242637c075f6472fbd6c5c274cdeefc1203
---
M src/widgets/CapsuleMultiselectWidget.js
1 file changed, 19 insertions(+), 12 deletions(-)

Approvals:
  Bartosz Dziewoński: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/src/widgets/CapsuleMultiselectWidget.js 
b/src/widgets/CapsuleMultiselectWidget.js
index f7bc973..ecc7bcb 100644
--- a/src/widgets/CapsuleMultiselectWidget.js
+++ b/src/widgets/CapsuleMultiselectWidget.js
@@ -181,7 +181,7 @@
                if ( this.$input ) {
                        this.updateInputSize();
                }
-       } );
+       }.bind( this ) );
 
        this.onMenuItemsChange();
 };
@@ -639,26 +639,33 @@
  * @param {jQuery.Event} e Event of some sort
  */
 OO.ui.CapsuleMultiselectWidget.prototype.updateInputSize = function () {
-       var $lastItem, direction, contentWidth, currentWidth, bestWidth, 
movedPlaceholder;
+       var $lastItem, direction, contentWidth, currentWidth, bestWidth;
        if ( !this.isDisabled() ) {
                this.$input.css( 'width', '1em' );
                $lastItem = this.$group.children().last();
                direction = OO.ui.Element.static.getDir( this.$handle );
 
-               // Move the placeholder text to value to get true width
-               if ( this.$input.val() === '' ) {
+               // Get the width of the input with the placeholder text as
+               // the value and save it so that we don't keep recalculating
+               if (
+                       this.contentWidthWithPlaceholder === undefined &&
+                       this.$input.val() === '' &&
+                       this.$input.attr( 'placeholder' ) !== undefined
+               ) {
                        this.$input.val( this.$input.attr( 'placeholder' ) );
-                       movedPlaceholder = true;
-               }
-
-               contentWidth = this.$input[ 0 ].scrollWidth;
-               currentWidth = this.$input.width();
-
-               // Reset value
-               if ( movedPlaceholder ) {
+                       this.contentWidthWithPlaceholder = this.$input[ 0 
].scrollWidth;
                        this.$input.val( '' );
+
                }
 
+               // Always keep the input wide enough for the placeholder text
+               contentWidth = Math.max(
+                       this.$input[ 0 ].scrollWidth,
+                       // undefined arguments in Math.max lead to NaN
+                       ( this.contentWidthWithPlaceholder === undefined ) ?
+                               0 : this.contentWidthWithPlaceholder
+               );
+               currentWidth = this.$input.width();
 
                if ( contentWidth < currentWidth ) {
                        // All is fine, don't perform expensive calculations

-- 
To view, visit https://gerrit.wikimedia.org/r/316320
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: Ia7b66242637c075f6472fbd6c5c274cdeefc1203
Gerrit-PatchSet: 2
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <psax...@wikimedia.org>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: jenkins-bot <>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to