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

Change subject: CapsuleMultiselectWidget: Add placeholder option
......................................................................


CapsuleMultiselectWidget: Add placeholder option

Bug: T147813
Change-Id: If665d261ddba54b8b237c5c3080ecfdc05b14e11
---
M demos/pages/widgets.js
M src/widgets/CapsuleMultiselectWidget.js
2 files changed, 48 insertions(+), 4 deletions(-)

Approvals:
  Jforrester: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index 2ab84bb..b9d6b08 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -1370,6 +1370,25 @@
                                ),
                                new OO.ui.FieldLayout(
                                        new OO.ui.CapsuleMultiselectWidget( {
+                                               placeholder: 'Type like a 
cat...',
+                                               menu: {
+                                                       items: [
+                                                               new 
OO.ui.MenuOptionWidget( { data: 'abc', label: 'Label for abc' } ),
+                                                               new 
OO.ui.MenuOptionWidget( { data: 'asd', label: 'Label for asd' } ),
+                                                               new 
OO.ui.MenuOptionWidget( { data: 'jkl', label: 'Label for jkl' } ),
+                                                               new 
OO.ui.MenuOptionWidget( { data: 'jjj', label: 'Label for jjj' } ),
+                                                               new 
OO.ui.MenuOptionWidget( { data: 'zxc', label: 'Label for zxc' } ),
+                                                               new 
OO.ui.MenuOptionWidget( { data: 'vbn', label: 'Label for vbn' } )
+                                                       ]
+                                               }
+                                       } ),
+                                       {
+                                               label: 
'CapsuleMultiselectWidget (with placeholder)',
+                                               align: 'top'
+                                       }
+                               ),
+                               new OO.ui.FieldLayout(
+                                       new OO.ui.CapsuleMultiselectWidget( {
                                                allowArbitrary: true,
                                                icon: 'tag',
                                                indicator: 'required',
diff --git a/src/widgets/CapsuleMultiselectWidget.js 
b/src/widgets/CapsuleMultiselectWidget.js
index 4a5b682..f7bc973 100644
--- a/src/widgets/CapsuleMultiselectWidget.js
+++ b/src/widgets/CapsuleMultiselectWidget.js
@@ -50,6 +50,7 @@
  *
  * @constructor
  * @param {Object} [config] Configuration options
+ * @cfg {string} [placeholder] Placeholder text
  * @cfg {boolean} [allowArbitrary=false] Allow data items to be added even if 
not present in the menu.
  * @cfg {Object} [menu] (required) Configuration options to pass to the
  *  {@link OO.ui.MenuSelectWidget menu select widget}.
@@ -76,8 +77,11 @@
        }, config );
 
        // Properties (must be set before mixin constructor calls)
-       this.$input = config.popup ? null : $( '<input>' );
        this.$handle = $( '<div>' );
+       this.$input = config.popup ? null : $( '<input>' );
+       if ( config.placeholder !== undefined && config.placeholder !== '' ) {
+               this.$input.attr( 'placeholder', config.placeholder );
+       }
 
        // Mixin constructors
        OO.ui.mixin.GroupElement.call( this, config );
@@ -153,7 +157,6 @@
                        role: 'combobox',
                        'aria-autocomplete': 'list'
                } );
-               this.updateInputSize();
        }
        if ( config.data ) {
                this.setItemsFromData( config.data );
@@ -172,6 +175,14 @@
                this.$content.append( this.$input );
                this.$overlay.append( this.menu.$element );
        }
+
+       // Input size needs to be calculated after everything else is rendered
+       setTimeout( function () {
+               if ( this.$input ) {
+                       this.updateInputSize();
+               }
+       } );
+
        this.onMenuItemsChange();
 };
 
@@ -628,26 +639,40 @@
  * @param {jQuery.Event} e Event of some sort
  */
 OO.ui.CapsuleMultiselectWidget.prototype.updateInputSize = function () {
-       var $lastItem, direction, contentWidth, currentWidth, bestWidth;
+       var $lastItem, direction, contentWidth, currentWidth, bestWidth, 
movedPlaceholder;
        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() === '' ) {
+                       this.$input.val( this.$input.attr( 'placeholder' ) );
+                       movedPlaceholder = true;
+               }
+
                contentWidth = this.$input[ 0 ].scrollWidth;
                currentWidth = this.$input.width();
+
+               // Reset value
+               if ( movedPlaceholder ) {
+                       this.$input.val( '' );
+               }
+
 
                if ( contentWidth < currentWidth ) {
                        // All is fine, don't perform expensive calculations
                        return;
                }
 
-               if ( !$lastItem.length ) {
+               if ( $lastItem.length === 0 ) {
                        bestWidth = this.$content.innerWidth();
                } else {
                        bestWidth = direction === 'ltr' ?
                                this.$content.innerWidth() - 
$lastItem.position().left - $lastItem.outerWidth() :
                                $lastItem.position().left;
                }
+
                // Some safety margin for sanity, because I *really* don't feel 
like finding out where the few
                // pixels this is off by are coming from.
                bestWidth -= 10;

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

Gerrit-MessageType: merged
Gerrit-Change-Id: If665d261ddba54b8b237c5c3080ecfdc05b14e11
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: Jforrester <jforres...@wikimedia.org>
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