diff --git a/autocomplete-input-text.js b/autocomplete-input-text.js index 2be30c6..f5d1155 100644 --- a/autocomplete-input-text.js +++ b/autocomplete-input-text.js @@ -15,6 +15,7 @@ $_documentContainer.innerHTML = ` padding: 0; } + #d2l-labs-autocomplete-dropdown-label { + font-size: 0.7rem; + padding: 0.4rem 0.7rem; + } + .d2l-labs-autocomplete-suggestion { @apply --d2l-body-compact-text; cursor: pointer; @@ -45,28 +50,30 @@ $_documentContainer.innerHTML = `
    - - - -
+ align="start" + > +
[[dropdownLabel]]
+
    + + + +
@@ -115,12 +122,6 @@ class Autocomplete extends PolymerElement { observer: '_dropdownIndexChanged' }, /** - * Used to set the width of the dropdown - */ - _dropdownWidth: { - type: Number, - }, - /** * The input element associated with the autocomplete */ _input: { @@ -140,6 +141,12 @@ class Autocomplete extends PolymerElement { type: Object, value: { UP: 38, DOWN: 40, ENTER: 13, ESCAPE: 27, HOME: 36, END: 35 } }, + /** + * Used to set min width of the dropdown + */ + _minWidth: { + type: Number, + }, /** * List of autocomplete suggestions */ @@ -155,6 +162,13 @@ class Autocomplete extends PolymerElement { type: Array, value: [], }, + /** + * Label to display at the top of the dropdown + */ + dropdownLabel: { + type: String, + value: null, + }, /** * Function used to filter `data` */ @@ -322,7 +336,8 @@ class Autocomplete extends PolymerElement { _onFocus(event) { this._inputHasFocus = true; - this._dropdownWidth = this._input.offsetWidth; + this._minWidth = this._input.offsetWidth; + if (this.showOnFocus && event.relatedTarget !== this) { this._updateSuggestionsVisible(); this._selectDropdownIndex(this.selectFirst ? 0 : -1);