kopia lustrzana https://github.com/shoelace-style/shoelace
fixes #1201
rodzic
f9ae8327f6
commit
8a1efac9b8
|
@ -17,6 +17,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
|
|||
- Fixed a bug in `<sl-tab>` that caused `sl-tab-show` to be emitted when activating the close button
|
||||
- Fixed a bug in `<sl-spinner>` that caused `--track-color` to be invisible with certain colors
|
||||
- Fixed a bug in `<sl-menu-item>` that caused the focus color to show when selecting menu items with a mouse or touch device
|
||||
- Fixed a bug in `<sl-select>` that caused `sl-change` and `sl-input` to be emitted too early [#1201](https://github.com/shoelace-style/shoelace/issues/1201)
|
||||
- Updated `@shoelace-style/localize` to 3.1.0
|
||||
|
||||
When using `<input type="password">` the default value for `autocapitalize`, `autocomplete`, and `autocorrect` may be affected due to the bug fixed in [#1205](https://github.com/shoelace-style/shoelace/issues/1205). For any affected users, setting these attributes to `off` will restore the previous behavior.
|
||||
|
|
|
@ -162,6 +162,32 @@ describe('<sl-select>', () => {
|
|||
|
||||
await el.updateComplete;
|
||||
});
|
||||
|
||||
it('should emit sl-change and sl-input with the correct validation message when the value changes', async () => {
|
||||
const el = await fixture<SlSelect>(html`
|
||||
<sl-select required>
|
||||
<sl-option value="option-1">Option 1</sl-option>
|
||||
<sl-option value="option-2">Option 2</sl-option>
|
||||
<sl-option value="option-3">Option 3</sl-option>
|
||||
</sl-select>
|
||||
`);
|
||||
const option2 = el.querySelectorAll('sl-option')[1];
|
||||
const handler = sinon.spy((event: CustomEvent) => {
|
||||
if (el.validationMessage) {
|
||||
expect.fail(`Validation message should be empty when ${event.type} is emitted and a value is set`);
|
||||
}
|
||||
});
|
||||
|
||||
el.addEventListener('sl-change', handler);
|
||||
el.addEventListener('sl-input', handler);
|
||||
|
||||
await clickOnElement(el);
|
||||
await aTimeout(500);
|
||||
await clickOnElement(option2);
|
||||
await el.updateComplete;
|
||||
|
||||
expect(handler).to.be.calledTwice;
|
||||
});
|
||||
});
|
||||
|
||||
it('should open the listbox when any letter key is pressed with sl-select is on focus', async () => {
|
||||
|
|
|
@ -253,8 +253,11 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
|
|||
this.setSelectedOptions(this.currentOption);
|
||||
}
|
||||
|
||||
this.emit('sl-input');
|
||||
this.emit('sl-change');
|
||||
// Emit after updating
|
||||
this.updateComplete.then(() => {
|
||||
this.emit('sl-input');
|
||||
this.emit('sl-change');
|
||||
});
|
||||
|
||||
if (!this.multiple) {
|
||||
this.hide();
|
||||
|
@ -378,9 +381,13 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
|
|||
if (this.value !== '') {
|
||||
this.setSelectedOptions([]);
|
||||
this.displayInput.focus({ preventScroll: true });
|
||||
this.emit('sl-clear');
|
||||
this.emit('sl-input');
|
||||
this.emit('sl-change');
|
||||
|
||||
// Emit after update
|
||||
this.updateComplete.then(() => {
|
||||
this.emit('sl-clear');
|
||||
this.emit('sl-input');
|
||||
this.emit('sl-change');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -406,8 +413,11 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
|
|||
this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.emit('sl-input');
|
||||
this.emit('sl-change');
|
||||
// Emit after updating
|
||||
this.updateComplete.then(() => {
|
||||
this.emit('sl-input');
|
||||
this.emit('sl-change');
|
||||
});
|
||||
}
|
||||
|
||||
if (!this.multiple) {
|
||||
|
@ -442,8 +452,12 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
|
|||
|
||||
if (!this.disabled) {
|
||||
this.toggleOptionSelection(option, false);
|
||||
this.emit('sl-input');
|
||||
this.emit('sl-change');
|
||||
|
||||
// Emit after updating
|
||||
this.updateComplete.then(() => {
|
||||
this.emit('sl-input');
|
||||
this.emit('sl-change');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue