[MediaWiki-commits] [Gerrit] oojs/ui[master]: CapsuleMultiSelectWidget: Always keep input as wide as place...
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
Gerrit-Reviewer: Bartosz Dziewoński
Gerrit-Reviewer: jenkins-bot <>
___
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
[MediaWiki-commits] [Gerrit] oojs/ui[master]: CapsuleMultiSelectWidget: Always keep input as wide as place...
Prtksxna has uploaded a new change for review.
https://gerrit.wikimedia.org/r/316320
Change subject: CapsuleMultiSelectWidget: Always keep input as wide as
placeholder text
..
CapsuleMultiSelectWidget: Always keep input as wide as placeholder text
Follow up If665d261ddba54b8b237c5c3080ecfdc05b14e11
Bug: T147813
Change-Id: Ia7b66242637c075f6472fbd6c5c274cdeefc1203
---
M src/widgets/CapsuleMultiselectWidget.js
1 file changed, 19 insertions(+), 12 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/20/316320/1
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: newchange
Gerrit-Change-Id: Ia7b66242637c075f6472fbd6c5c274cdeefc1203
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Prtksxna
___
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
