Et2Select: Add onTagClick property for actions on tag clicks

Fixes unable to detect clicking on individual tags inside readonly et2-select-email
This commit is contained in:
nathan 2023-02-08 09:10:52 -07:00
parent c6e025d31b
commit efa550f251
2 changed files with 15 additions and 2 deletions

View File

@ -175,6 +175,14 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
multiple: { multiple: {
type: Boolean, type: Boolean,
reflect: true, reflect: true,
},
/**
* Click handler for individual tags instead of the select as a whole.
* Only used if multiple=true so we have tags
*/
onTagClick: {
type: Function,
} }
} }
} }
@ -596,6 +604,11 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
tag.addEventListener("keydown", this.handleTagInteraction); tag.addEventListener("keydown", this.handleTagInteraction);
tag.addEventListener("sl-remove", (event : CustomEvent) => this.handleTagRemove(event, item)); tag.addEventListener("sl-remove", (event : CustomEvent) => this.handleTagRemove(event, item));
} }
// Allow click handler even if read only
if(typeof this.onTagClick == "function")
{
tag.addEventListener("click", (e) => this.onTagClick(e, e.target));
}
let image = this._createImage(item); let image = this._createImage(item);
if(image) if(image)
{ {

View File

@ -43,13 +43,13 @@
<et2-description value="To" class="firstColumnTitle"></et2-description> <et2-description value="To" class="firstColumnTitle"></et2-description>
<et2-select-email id="additionaltoaddress" readonly="true" multiple="true" <et2-select-email id="additionaltoaddress" readonly="true" multiple="true"
rows="1" maxTagsVisible="1" rows="1" maxTagsVisible="1"
onclick="app.mail.onclickCompose"></et2-select-email> onTagClick="app.mail.onclickCompose"></et2-select-email>
</et2-hbox> </et2-hbox>
<et2-hbox disabled="!@ccaddress" width="100%"> <et2-hbox disabled="!@ccaddress" width="100%">
<et2-description value="Cc" class="firstColumnTitle"></et2-description> <et2-description value="Cc" class="firstColumnTitle"></et2-description>
<et2-select-email id="ccaddress" readonly="true" multiple="true" <et2-select-email id="ccaddress" readonly="true" multiple="true"
rows="1" maxTagsVisible="1" rows="1" maxTagsVisible="1"
onclick="app.mail.onclickCompose"></et2-select-email> onTagClick="app.mail.onclickCompose"></et2-select-email>
</et2-hbox> </et2-hbox>
</et2-vbox> </et2-vbox>