diff --git a/src/components/select/bl-select.css b/src/components/select/bl-select.css index 2e77a12d..efc011b4 100644 --- a/src/components/select/bl-select.css +++ b/src/components/select/bl-select.css @@ -162,6 +162,10 @@ text-overflow: ellipsis; } +:host([disabled]) .select-input .selected-options { + color: var(--bl-color-neutral-light); +} + .selected-options li { display: inline; font-size: var(--font-size); @@ -176,6 +180,10 @@ display: none; } +:host([disabled]) .additional-selection-count { + color: var(--bl-color-neutral-light); +} + :host([disabled]) .selected-options li { color: var(--bl-color-neutral-light); } diff --git a/src/components/select/bl-select.test.ts b/src/components/select/bl-select.test.ts index 01cfa2ff..c16ca5e3 100644 --- a/src/components/select/bl-select.test.ts +++ b/src/components/select/bl-select.test.ts @@ -596,6 +596,25 @@ describe("bl-select", () => { expect(document.activeElement).to.not.equal(blSelect); }); + + it("should not open popover if it is disabled", async () => { + // if it is disabled, it should not open popover and return from function + blSelect.disabled = true; + + // given + + await sendKeys({ + press: tabKey, + }); + + await sendKeys({ + press: "Space", + }); + + // then + expect(blSelect.opened).to.equal(false); + }); + ["Space", "Enter", "ArrowDown", "ArrowUp"].forEach(keyCode => { it(`should open popover with ${keyCode} key`, async () => { //given diff --git a/src/components/select/bl-select.ts b/src/components/select/bl-select.ts index d234dec1..ee9f8f65 100644 --- a/src/components/select/bl-select.ts +++ b/src/components/select/bl-select.ts @@ -152,7 +152,7 @@ export default class BlSelect extends Form /** * Views select all option in multiple select */ - @property({ type: Boolean, attribute: "view-select-all" }) + @property({ type: Boolean, attribute: "view-select-all", converter: stringBooleanConverter() }) viewSelectAll = false; /** @@ -439,12 +439,15 @@ export default class BlSelect extends Form >` : ""} -
+
${this.opened ? (this.searchBarLoadingState ? searchLoadingIcon : searchMagIcon) : ""} ${!this.opened ? removeButton : ""} ${actionDivider} - - +
+ + + +
`; @@ -455,7 +458,7 @@ export default class BlSelect extends Form "select-input": true, "has-overflowed-options": this._additionalSelectedOptionCount > 0, })} - tabindex="${this.disabled ? "-1" : 0}" + tabindex="${ifDefined(this.disabled ? undefined : 0)}" ?autofocus=${this.autofocus} @click=${this._togglePopover} role="button"