js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix selected stuff

Browse Source
This commit is contained in:
konnorrogers
2025-06-20 15:03:45 -04:00
parent c4e08c09bd
commit d00e43a421
3 changed files with 27 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/webawesome/docs/docs/components/select.md
View File

@@ -8,16 +8,27 @@ icon: select
```html {.example}
<form id="base-example">
<wa-select name="select-1" value="option-2">
<wa-select name="select-1" multiple value="option-3">
<wa-option value="option-1">Option 1</wa-option>
<wa-option selected value="option-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option>
<wa-option selected value="option-4">Option 4</wa-option>
<wa-option selected value="option-5">Option 5</wa-option>
<wa-option value="option-6">Option 6</wa-option>
</wa-select>
<br>
<wa-select name="select-2" value="option-2">
<wa-option value="option-1">Option 1</wa-option>
<wa-option value="option-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option>
<wa-option value="option-4">Option 4</wa-option>
<wa-option value="option-5">Option 5</wa-option>
<wa-option selected value="option-5">Option 5</wa-option>
<wa-option value="option-6">Option 6</wa-option>
</wa-select>
<br>
<wa-select name="select-2" multiple value="option-4">
<wa-select name="select-3" multiple value="option-4">
<wa-option value="option-1">Option 1</wa-option>
<wa-option value="option-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option>
@@ -446,4 +457,4 @@ This can be hard to conceptualize, so heres a fairly large example showing how l
container.addEventListener("click", addFooOption)
container.addEventListener("submit", handleLazySubmit)
</script>
```
```

7
packages/webawesome/src/components/option/option.ts
View File

@@ -109,10 +109,6 @@ export default class WaOption extends WebAwesomeElement {
private handleDefaultSlotChange() {
// Tell the controller to update the label
if (customElements.get('wa-select')) {
this.closest('wa-select')?.selectionChanged();
}
this.updateDefaultLabel();
if (this.isInitialized) {
@@ -121,6 +117,7 @@ export default class WaOption extends WebAwesomeElement {
const controller = this.closest('wa-select');
if (controller) {
controller.handleDefaultSlotChange();
controller.selectionChanged?.()
}
});
} else {
@@ -159,7 +156,7 @@ export default class WaOption extends WebAwesomeElement {
if (changedProperties.has('selected')) {
this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
this.customStates.set('selected', this.selected);
this.closest("wa-select")?.selectionChanged?.()
this.handleDefaultSlotChange()
}
if (changedProperties.has('value')) {

20
packages/webawesome/src/components/select/select.ts
View File

@@ -165,17 +165,15 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
}
if (!Array.isArray(val)) {
val = val.split(' ');
val = [val];
}
// if (!this._value || this._value.join(' ') !== val.join(' ')) {
this._value = val;
let newValue = this.value;
this._value = val;
let newValue = this.value;
if (newValue !== oldValue) {
this.requestUpdate('value', oldValue);
}
// }
if (newValue !== oldValue) {
this.requestUpdate('value', oldValue);
}
}
get value() {
@@ -565,7 +563,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
const value = this.value;
// Select only the options that match the new value
this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
this.setSelectedOptions(allOptions.filter(el => value.includes(el.value) || el.selected));
}
private handleTagRemove(event: WaRemoveEvent, directOption?: WaOption) {
@@ -675,7 +673,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
const options = this.getAllOptions();
// Update selected options cache
this.selectedOptions = options.filter(el => el.selected);
this.selectedOptions = options.filter(el => {
return el.selected
});
let selectedValues = new Set(this.selectedOptions.map(el => el.value));
// Toggle values present in the DOM from this.value, while preserving options NOT present in the DOM (for lazy loading)