From 55282610505471145edd2d0cf40e633376bb2933 Mon Sep 17 00:00:00 2001 From: nathan Date: Tue, 17 May 2022 09:40:34 -0600 Subject: [PATCH] Fix dropdown took over nextmatch header --- .../Et2DropdownButton/Et2DropdownButton.ts | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/api/js/etemplate/Et2DropdownButton/Et2DropdownButton.ts b/api/js/etemplate/Et2DropdownButton/Et2DropdownButton.ts index cae6690520..79826e792a 100644 --- a/api/js/etemplate/Et2DropdownButton/Et2DropdownButton.ts +++ b/api/js/etemplate/Et2DropdownButton/Et2DropdownButton.ts @@ -41,7 +41,10 @@ export class Et2DropdownButton extends Et2widgetWithSelectMixin(Et2Button) buttonStyles, css` :host { - display: contents; + /* Avoid unwanted style overlap from button */ + border: none; + background-color: none; + /** Adapt shoelace color variables to what we want Maybe some logical variables from etemplate2.css here? @@ -52,6 +55,9 @@ export class Et2DropdownButton extends Et2widgetWithSelectMixin(Et2Button) --sl-color-primary-400: var(--input-border-color); --sl-color-primary-700: #505050; } + :host(:active), :host([active]) { + background-color: initial; + } `, ]; } @@ -85,8 +91,14 @@ export class Et2DropdownButton extends Et2widgetWithSelectMixin(Et2Button) // Need to wait until update is done and these exist this.updateComplete.then(() => { - this.buttonNode.addEventListener("click", this._handleClick); - this.dropdownNode.addEventListener('sl-select', this._handleSelect); + if(this.buttonNode) + { + this.buttonNode.addEventListener("click", this._handleClick); + } + if(this.dropdownNode) + { + this.dropdownNode.addEventListener('sl-select', this._handleSelect); + } }); }