web: fix event propagation in search-select wrappers (#8224)

web: fix event propogation in search-select wrappers

Two different patches, an older one that extracted long search
blocks that were cut-and-pasted into a standalone component, and a
newer one that fixed displaying placeholder values properly,
conflicted and broke a relationship that allowed for the values to
be propagated through those standalone components correctly.

This restores the event handling and updates the listener set-ups
with more idiomatic hooks into Lit's event system.
This commit is contained in:
Ken Sternberg
2024-01-18 08:28:43 -08:00
committed by GitHub
parent 86bf75fe54
commit abf1f0e348
6 changed files with 6 additions and 4 deletions

View File

@ -65,7 +65,6 @@ export class SAMLPropertyMappingSearch extends CustomListenerElement(AKElement)
super();
this.selected = this.selected.bind(this);
this.handleSearchUpdate = this.handleSearchUpdate.bind(this);
this.addCustomListener("ak-change", this.handleSearchUpdate);
}
get value() {
@ -102,6 +101,7 @@ export class SAMLPropertyMappingSearch extends CustomListenerElement(AKElement)
.renderElement=${renderElement}
.value=${renderValue}
.selected=${this.selected}
@ak-change=${this.handleSearchUpdate}
blankable
>
</ak-search-select>

View File

@ -57,7 +57,6 @@ export class CoreGroupSearch extends CustomListenerElement(AKElement) {
super();
this.selected = this.selected.bind(this);
this.handleSearchUpdate = this.handleSearchUpdate.bind(this);
this.addCustomListener("ak-change", this.handleSearchUpdate);
}
get value() {
@ -94,6 +93,7 @@ export class CoreGroupSearch extends CustomListenerElement(AKElement) {
.renderElement=${renderElement}
.value=${renderValue}
.selected=${this.selected}
@ak-change=${this.handleSearchUpdate}
?blankable=${true}
>
</ak-search-select>

View File

@ -65,7 +65,6 @@ export class AkCryptoCertificateSearch extends CustomListenerElement(AKElement)
this.selected = this.selected.bind(this);
this.fetchObjects = this.fetchObjects.bind(this);
this.handleSearchUpdate = this.handleSearchUpdate.bind(this);
this.addCustomListener("ak-change", this.handleSearchUpdate);
}
get value() {
@ -120,6 +119,7 @@ export class AkCryptoCertificateSearch extends CustomListenerElement(AKElement)
.renderElement=${renderElement}
.value=${renderValue}
.selected=${this.selected}
@ak-change=${this.handleSearchUpdate}
?blankable=${true}
>
</ak-search-select>

View File

@ -74,7 +74,6 @@ export class FlowSearch<T extends Flow> extends CustomListenerElement(AKElement)
this.fetchObjects = this.fetchObjects.bind(this);
this.selected = this.selected.bind(this);
this.handleSearchUpdate = this.handleSearchUpdate.bind(this);
this.addCustomListener("ak-change", this.handleSearchUpdate);
}
handleSearchUpdate(ev: CustomEvent) {
@ -124,6 +123,7 @@ export class FlowSearch<T extends Flow> extends CustomListenerElement(AKElement)
.renderDescription=${renderDescription}
.value=${getFlowValue}
.name=${this.name}
@ak-change=${this.handleSearchUpdate}
?blankable=${!this.required}
>
</ak-search-select>

View File

@ -24,6 +24,7 @@ export class AkFlowSearchNoDefault<T extends Flow> extends FlowSearch<T> {
.renderElement=${renderElement}
.renderDescription=${renderDescription}
.value=${getFlowValue}
@ak-change=${this.handleSearchUpdate}
?blankable=${!this.required}
>
</ak-search-select>

View File

@ -220,6 +220,7 @@ export class SearchSelect<T> extends CustomEmitterElement(AKElement) {
onMenuItemClick(obj: T | undefined) {
return () => {
this.selectedObject = obj;
this.dispatchCustomEvent("ak-change", { value: this.selectedObject });
this.open = false;
};
}