` elements in the dropdown.",
"sourceRange": {
"start": {
- "line": 333,
+ "line": 343,
"column": 6
},
"end": {
- "line": 339,
+ "line": 349,
"column": 7
}
},
@@ -5069,11 +5107,11 @@
"description": "By default, the dropdown will constrain scrolling on the page to\nitself when opened. Set to true in order to allow scrolling of\nthe page while the dropdown is open.",
"sourceRange": {
"start": {
- "line": 345,
+ "line": 355,
"column": 6
},
"end": {
- "line": 348,
+ "line": 358,
"column": 7
}
},
@@ -5085,11 +5123,11 @@
"description": "Style for the button that invokes the dropdown.\nOne of 'default','bare','bare--primary', 'tertiary', or 'icon'.",
"sourceRange": {
"start": {
- "line": 353,
+ "line": 363,
"column": 6
},
"end": {
- "line": 356,
+ "line": 366,
"column": 7
}
},
@@ -5101,11 +5139,11 @@
"description": "Whether the dropdown should be disabled and non-interactive.",
"sourceRange": {
"start": {
- "line": 360,
+ "line": 370,
"column": 6
},
"end": {
- "line": 363,
+ "line": 373,
"column": 7
}
},
@@ -5117,11 +5155,11 @@
"description": "Whether the dropdown should be disabled and interactive.",
"sourceRange": {
"start": {
- "line": 367,
+ "line": 377,
"column": 6
},
"end": {
- "line": 370,
+ "line": 380,
"column": 7
}
},
@@ -5133,11 +5171,11 @@
"description": "If true, the dropdown will include a search box, whereby the\ndropdown items can be filtered with a search term.",
"sourceRange": {
"start": {
- "line": 375,
+ "line": 385,
"column": 6
},
"end": {
- "line": 378,
+ "line": 388,
"column": 7
}
},
@@ -5149,11 +5187,11 @@
"description": "The value of the search box, used for filtering the dropdown\nitems when searchMode is true.",
"sourceRange": {
"start": {
- "line": 383,
+ "line": 393,
"column": 6
},
"end": {
- "line": 386,
+ "line": 396,
"column": 7
}
},
@@ -5165,11 +5203,11 @@
"description": "What to sort the dropdown items by - one of \"key\" or \"val\".\nBy default, the items will be displayed in the order they are\npassed into the component.",
"sourceRange": {
"start": {
- "line": 392,
+ "line": 402,
"column": 6
},
"end": {
- "line": 394,
+ "line": 404,
"column": 7
}
},
@@ -5181,11 +5219,11 @@
"description": "If set to true, the display-value will always show up in the\ninvoking button of the dropdown. Useful in cases like the\npx-data-table, where \"Show/Hide Columns\" should always appear.",
"sourceRange": {
"start": {
- "line": 400,
+ "line": 410,
"column": 6
},
"end": {
- "line": 403,
+ "line": 413,
"column": 7
}
},
@@ -5197,11 +5235,11 @@
"description": "If buttonStyle is set to 'icon' this property will dictate\nwhich icon will be displayed inside of the dropdown button.\nThe `displayValue`, selected values, and chevron will not be displayed.\nPerfect for icon-invoked menus. The value of this property should\nbe a valid px-icon name, e.g. 'px-utl:app-settings'",
"sourceRange": {
"start": {
- "line": 411,
+ "line": 421,
"column": 6
},
"end": {
- "line": 414,
+ "line": 424,
"column": 7
}
},
@@ -5213,11 +5251,11 @@
"description": "Set this property if you would like the `selected` and `selectedValues`\nproperties to be cleared whenever mutations are made to the `items` array.",
"sourceRange": {
"start": {
- "line": 419,
+ "line": 429,
"column": 6
},
"end": {
- "line": 422,
+ "line": 432,
"column": 7
}
},
@@ -5229,11 +5267,11 @@
"description": "The height of the trigger element, used for calculating offset distance\nfor the dropdown. Set this value if you use the `trigger` slot.",
"sourceRange": {
"start": {
- "line": 427,
+ "line": 437,
"column": 6
},
"end": {
- "line": 430,
+ "line": 440,
"column": 7
}
},
@@ -5245,11 +5283,11 @@
"description": "By default, the dropdown menu will be flush against the trigger.\nEnable this property to show a caret between the two. Useful\nin iconic menus and used by the application/product switcher.",
"sourceRange": {
"start": {
- "line": 436,
+ "line": 446,
"column": 6
},
"end": {
- "line": 439,
+ "line": 449,
"column": 7
}
},
@@ -5261,11 +5299,11 @@
"description": "By default the dropdown will attempt to automatically align itself\nvertically and horizontally based on the available space. Set this flag\nto turn off that automatic behavior and force a certain `verticalAlign` / `horizontalAlign`.",
"sourceRange": {
"start": {
- "line": 445,
+ "line": 455,
"column": 6
},
"end": {
- "line": 448,
+ "line": 458,
"column": 7
}
},
@@ -5277,11 +5315,11 @@
"description": "Vertical alignment of the dropdown relative to the trigger.\nShould be one of `top` or `bottom` where `top` means that the dropdown\nand trigger are aligned at the top, so the dropdown will extend _below_ the trigger.\nOverridden by dynamic alignment, unless `disableDynamicAlign` is true.",
"sourceRange": {
"start": {
- "line": 455,
+ "line": 465,
"column": 6
},
"end": {
- "line": 458,
+ "line": 468,
"column": 7
}
},
@@ -5293,11 +5331,11 @@
"description": "Horizontal alignment of the dropdown relative to the trigger.\nShould be one of `left` or `right` where `left` means that the dropdown\nand trigger are aligned on their left side, so the dropdown will extend _to the right_.\nOverridden by dynamic alignment, unless `disableDynamicAlign` is true.",
"sourceRange": {
"start": {
- "line": 465,
+ "line": 475,
"column": 6
},
"end": {
- "line": 468,
+ "line": 478,
"column": 7
}
},
@@ -5309,11 +5347,11 @@
"description": "Whether to display the mobile version of the dropdown, which appears as a fullscreen modal.\nAutomatically detected based on the breakpoint specified in `mobileAt`.",
"sourceRange": {
"start": {
- "line": 473,
+ "line": 483,
"column": 6
},
"end": {
- "line": 476,
+ "line": 486,
"column": 7
}
},
@@ -5325,11 +5363,11 @@
"description": "The breakpoint (in # of pixels) at which to display the mobile version of px-dropdown.",
"sourceRange": {
"start": {
- "line": 480,
+ "line": 490,
"column": 6
},
"end": {
- "line": 483,
+ "line": 493,
"column": 7
}
},
@@ -5341,11 +5379,11 @@
"description": "By default, the mobile dropdown will show Apply/Clear buttons.\nSet this property to hide them.",
"sourceRange": {
"start": {
- "line": 488,
+ "line": 498,
"column": 6
},
"end": {
- "line": 491,
+ "line": 501,
"column": 7
}
},
@@ -5357,11 +5395,11 @@
"description": "A valid IETF language tag as a string that `app-localize-behavior` will\nuse to localize this component.\n\nSee https://github.com/PolymerElements/app-localize-behavior for API\ndocumentation and more information.",
"sourceRange": {
"start": {
- "line": 499,
+ "line": 509,
"column": 6
},
"end": {
- "line": 502,
+ "line": 512,
"column": 7
}
},
@@ -5373,11 +5411,11 @@
"description": "",
"sourceRange": {
"start": {
- "line": 503,
+ "line": 513,
"column": 6
},
"end": {
- "line": 506,
+ "line": 516,
"column": 7
}
},
@@ -5389,11 +5427,11 @@
"description": "A dictionary of strings used within the component for AppLocalizeBehavior\nto use, based on the selected `language` property.",
"sourceRange": {
"start": {
- "line": 511,
+ "line": 521,
"column": 6
},
"end": {
- "line": 522,
+ "line": 532,
"column": 7
}
},
@@ -5405,11 +5443,11 @@
"description": "Specifies if the dropdown content should get hoisted to a container in order to escape its current stacking context",
"sourceRange": {
"start": {
- "line": 550,
+ "line": 560,
"column": 6
},
"end": {
- "line": 553,
+ "line": 563,
"column": 7
}
},
diff --git a/px-dropdown-content.html b/px-dropdown-content.html
index 78ec90de..397b9a57 100644
--- a/px-dropdown-content.html
+++ b/px-dropdown-content.html
@@ -583,13 +583,16 @@
},
/**
* Handles the selection event from iron-selector to update
- * the label displayed inside the dropdown.
+ * the label displayed inside the dropdown. Use the displayValueCount property to define how many values
+ * are displayed in the trigger value of multiple select lists
*/
_handleSelection: function(evt) {
- if(this.multi && this.selectedValues.length === 1 && !this.hideSelected) {
- this.displayValueSelected = this.$.selector.selectedItems[0].innerText.trim();
+ if(this.multi && this.$.selector.selectedItems.length > 0 && this.selectedValues.length <= this.displayValueCount && !this.hideSelected) {
+ this.displayValueSelected = this.$.selector.selectedItems.map(function(item) {
+ return item.val.trim();
+ }).join(', ');
}
- else if(this.multi && this.selectedValues.length > 1 && !this.hideSelected) {
+ else if(this.multi && this.selectedValues.length > this.displayValueCount && !this.hideSelected) {
this.displayValueSelected = this.selectedValues.length + ' ' + this.localize('selected');
}
else if(!this.hideSelected) {
@@ -618,10 +621,12 @@
* the label displayed inside the dropdown.
*/
_handleDeselection: function(evt) {
- if(this.multi && this.$.selector.selectedItems.length === 1 && !this.hideSelected) {
- this.displayValueSelected = this.$.selector.selectedItems[0].innerText.trim();
+ if(this.multi && this.$.selector.selectedItems.length > 0 && this.$.selector.selectedItems.length <= this.displayValueCount && !this.hideSelected) {
+ this.displayValueSelected = this.$.selector.selectedItems.map(function(item) {
+ return item.val.trim();
+ }).join(', ');
}
- else if(this.multi && this.selectedValues.length > 1 && !this.hideSelected) {
+ else if(this.multi && this.selectedValues.length > this.displayValueCount && !this.hideSelected) {
this.displayValueSelected = this.selectedValues.length + ' ' + this.localize('selected');
}
else {
diff --git a/px-dropdown.html b/px-dropdown.html
index ccfed118..58d9527e 100644
--- a/px-dropdown.html
+++ b/px-dropdown.html
@@ -145,6 +145,7 @@
opened="{{opened}}"
key-bindings-target="[[_keyBindingsTarget]]"
display-value="[[displayValue]]"
+ display-value-count="[[displayValueCount]]"
language="[[language]]"
resources="[[resources]]"
use-key-if-missing="[[useKeyIfMissing]]"
@@ -229,6 +230,15 @@
value: 'Select',
observer: '_resetMinWidth'
},
+ /**
+ * The number of values to display as a comma separated string on multi select lists.
+ * Selections greater then this number will display as "N Selected"
+ */
+ displayValueCount: {
+ type: Number,
+ value: 1,
+ observer: '_resetMinWidth'
+ },
/**
* If set to true, users are unable to clear out the dropdown
* once a selection has been made. Useful for required single-select
diff --git a/test/px-dropdown-custom-tests.js b/test/px-dropdown-custom-tests.js
index 9ef71a11..e7fbcfa3 100644
--- a/test/px-dropdown-custom-tests.js
+++ b/test/px-dropdown-custom-tests.js
@@ -50,7 +50,8 @@ describe("Custom Automation Tests for px-dropdown", function(done) {
"A very long value to test that the trigger and content widths can be constrained"
);
const triggerSize = px_dropdown_button.getBoundingClientRect();
- expect(triggerSize.width == 400).to.be.true;
+
+ expect(Math.floor(triggerSize.width) == 400).to.be.true;
done();
});
};
@@ -314,7 +315,54 @@ describe("Custom Automation Tests for sort feature px-dropdown", function(done)
});
});
-describe("Custom Automation Tests for px-dropdown", function(done) {
+describe("Custom Automation Tests for multiple display values feature px-dropdown", function(done) {
+ let px_dropdown;
+ let px_dropdown_button;
+ let dropdown_option;
+
+ beforeEach(function(done) {
+ px_dropdown = fixture("dropdown-multi-select-values-fixture");
+ flush(() => {
+ px_dropdown_button = px_dropdown.$.trigger.$.trigger;
+ done();
+ });
+ });
+
+ it("Trigger label is 'One, Two, Three' as section count is <= display-value-count", function(done) {
+ assert.equal(
+ px_dropdown._displayValueSelected,
+ "One, Two, Three",
+ "expected trigger value to be 'One, Two, Three'"
+ );
+ done();
+ });
+
+ it("Trigger label is '4 selected' as section count is > display-value-count", function(done) {
+ px_dropdown_content = px_dropdown.$.content.$.dropdown;
+ px_dropdown_button = px_dropdown.$.trigger.$.trigger;
+ dropdown_option = Polymer.dom(px_dropdown.$.content.root).querySelectorAll(
+ ".dropdown-option"
+ )[3];
+
+ var item_click = function(e) {
+ assert.equal(
+ px_dropdown._displayValueSelected,
+ "4 selected",
+ "expected trigger value to be '4 selected'"
+ );
+ done();
+ };
+ px_dropdown_button.click();
+ px_dropdown.addEventListener("px-dropdown-selection-changed", item_click);
+ dropdown_option.click();
+ px_dropdown.removeEventListener(
+ "px-dropdown-selection-changed",
+ item_click
+ );
+ });
+});
+
+describe("Close with esc key tests for px-dropdown", function(done) {
let px_dropdown;
let px_dropdown_content;
let px_dropdown_button;
diff --git a/test/px-dropdown-test-fixture.html b/test/px-dropdown-test-fixture.html
index a2f9dce9..055814da 100644
--- a/test/px-dropdown-test-fixture.html
+++ b/test/px-dropdown-test-fixture.html
@@ -51,10 +51,10 @@
-
-
-
-
+
+
+
+
@@ -64,6 +64,13 @@
+
+
+
+
+
+
+
@@ -87,10 +94,10 @@
-
-
-
-
-
+
+
+
+
+