RanchiMall/standard-ui
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug fixes

Browse Source
This commit is contained in:
sairaj mote 2023-04-25 01:57:55 +05:30
parent fe7d07973f
commit 48c877c913
2 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/dist/select.js vendored
View File

@ -161,6 +161,7 @@ customElements.define('sm-select', class extends HTMLElement {
this.handleClickOutside = this.handleClickOutside.bind(this) this.handleClickOutside = this.handleClickOutside.bind(this)
this.selectOption = this.selectOption.bind(this) this.selectOption = this.selectOption.bind(this)
this.debounce = this.debounce.bind(this) this.debounce = this.debounce.bind(this)
this.elementsChanged = this.elementsChanged.bind(this)
this.availableOptions = [] this.availableOptions = []
this.previousOption this.previousOption
@ -185,7 +186,7 @@ customElements.define('sm-select', class extends HTMLElement {
return this.getAttribute('value') return this.getAttribute('value')
} }
set value(val) { set value(val) {
const selectedOption = this.shadowRoot.querySelector('slot').assignedElements().find(option => option.getAttribute('value') === val) const selectedOption = this.availableOptions.find(option => option.getAttribute('value') === val)
if (selectedOption) { if (selectedOption) {
this.setAttribute('value', val) this.setAttribute('value', val)
this.selectOption(selectedOption) this.selectOption(selectedOption)
@ -345,6 +346,11 @@ customElements.define('sm-select', class extends HTMLElement {
this.collapse() this.collapse()
} }
} }
elementsChanged() {
this.availableOptions = [...this.querySelectorAll('sm-option')];
this.reset(false)
this.defaultSelected = this.value
}
connectedCallback() { connectedCallback() {
this.setAttribute('role', 'listbox') this.setAttribute('role', 'listbox')
if (!this.hasAttribute('disabled') && !this.hasAttribute('readonly')) { if (!this.hasAttribute('disabled') && !this.hasAttribute('readonly')) {
@ -352,12 +358,27 @@ customElements.define('sm-select', class extends HTMLElement {
this.addEventListener('click', this.handleClick) this.addEventListener('click', this.handleClick)
this.addEventListener('keydown', this.handleKeydown) this.addEventListener('keydown', this.handleKeydown)
} }
let slot = this.shadowRoot.querySelector('slot') const updateDecedents = this.debounce(this.elementsChanged, 100);
slot.addEventListener('slotchange', this.debounce(e => { this.shadowRoot.querySelector('slot').addEventListener('slotchange', updateDecedents);
this.availableOptions = slot.assignedElements() this.mutationObserver = new MutationObserver(mutations => {
this.reset(false) let attributesChanged = false;
this.defaultSelected = this.value mutations.forEach(mutation => {
}, 100)); switch (mutation.type) {
case 'childList':
updateDecedents();
break;
case 'attributes':
attributesChanged = true;
break;
}
});
if (attributesChanged) {
const selectedOption = this.availableOptions.find(option => option.hasAttribute('selected')) || this.availableOptions[0];
this.selectedOptionText.textContent = `${this.label}${selectedOption.textContent}`;
this.setAttribute('value', selectedOption.getAttribute('value'));
}
});
this.mutationObserver.observe(this, { subtree: true, childList: true, attributeFilter: ["selected"] });
new IntersectionObserver((entries, observer) => { new IntersectionObserver((entries, observer) => {
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {

2
components/dist/select.min.js vendored
View File

File diff suppressed because one or more lines are too long