From 660472d5db0419561f5cd99210fe1ecabc2b8b20 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 8 Aug 2019 17:51:11 +0200
Subject: [PATCH] Work around select not working when more than one element is
used
Looks like something is caching based on ID maybe?
---
packages/person-select/src/person-select-demo.js | 8 +++++++-
packages/person-select/src/person-select.js | 11 ++++++++---
2 files changed, 15 insertions(+), 4 deletions(-)
diff --git a/packages/person-select/src/person-select-demo.js b/packages/person-select/src/person-select-demo.js
index c08f53ae..cd69e2c8 100644
--- a/packages/person-select/src/person-select-demo.js
+++ b/packages/person-select/src/person-select-demo.js
@@ -40,7 +40,13 @@ class PersonSelectDemo extends LitElement {
<div class="container">
<form>
<div class="field">
- <label class="label">Person</label>
+ <label class="label">Person 1</label>
+ <div class="control">
+ <vpu-person-select lang="${this.lang}" entry-point-url="${getAPiUrl()}"></vpu-person-select>
+ </div>
+ </div>
+ <div class="field">
+ <label class="label">Person 2</label>
<div class="control">
<vpu-person-select lang="${this.lang}" entry-point-url="${getAPiUrl()}"></vpu-person-select>
</div>
diff --git a/packages/person-select/src/person-select.js b/packages/person-select/src/person-select.js
index a1af5953..48b22da8 100644
--- a/packages/person-select/src/person-select.js
+++ b/packages/person-select/src/person-select.js
@@ -11,6 +11,8 @@ import commonUtils from 'vpu-common/utils';
select2(window, $);
+var selectId = 0;
+
class PersonSelect extends VPULitElementJQuery {
constructor() {
@@ -19,6 +21,8 @@ class PersonSelect extends VPULitElementJQuery {
this.entryPointUrl = getAPiUrl();
this.jsonld = null;
this.$select = null;
+ // XXX: For some reason using the same ID twice breaks select2
+ this.selectId = 'person-select' + selectId++;
}
static get properties() {
@@ -33,7 +37,7 @@ class PersonSelect extends VPULitElementJQuery {
const that = this;
this.updateComplete.then(()=>{
- that.$select = that.$('#person-select');
+ that.$select = $(that.shadowRoot.getElementById(that.selectId));
// close the selector on blur of the web component
$(that).blur(() => {
@@ -52,6 +56,7 @@ class PersonSelect extends VPULitElementJQuery {
const $this = $(this);
let lastResult = {};
+
// find the correct api url for a person
const apiUrl = this.jsonld.getApiUrlForIdentifier("http://schema.org/Person");
// const apiUrl = this.jsonld.getApiUrlForEntityName("Event");
@@ -152,13 +157,13 @@ class PersonSelect extends VPULitElementJQuery {
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
<link rel="stylesheet" href="${select2CSS}">
<style>
- #person-select {
+ #${this.selectId} {
width: 100%;
}
</style>
<!-- https://select2.org-->
- <select id="person-select" name="person" class="select"></select>
+ <select id="${this.selectId}" name="person" class="select"></select>
<div id="person-select-dropdown"></div>
`;
}
--
GitLab