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

try CI now

Browse Source
This commit is contained in:
konnorrogers
2024-09-17 14:58:05 -04:00
parent 9d88c4b39a
commit dc623a5a91
3 changed files with 36 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docs/components/color-picker.md
View File

@@ -5,7 +5,7 @@ layout: component
---
```html {.example}
<wa-color-picker label="Select a color"></wa-color-picker>
<wa-color-picker label="Select a color" required></wa-color-picker>
```
:::info

15
src/components/color-picker/color-picker.ts
View File

@@ -2,8 +2,8 @@ import '../button-group/button-group.js';
import '../button/button.js';
import '../dropdown/dropdown.js';
import '../icon/icon.js';
// import '../input/input.js';
// import '../visually-hidden/visually-hidden.js';
import '../input/input.js';
import '../visually-hidden/visually-hidden.js';
import { clamp } from '../../internal/math.js';
import { classMap } from 'lit/directives/class-map.js';
import { customElement, eventOptions, property, query, state } from 'lit/decorators.js';
@@ -830,12 +830,21 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
}
}
private reportValidityAfterShow = () => {
// Remove the event so we dont emit "wa-invalid" twice
this.removeEventListener("invalid", this.emitInvalid)
this.reportValidity()
this.addEventListener("invalid", this.emitInvalid)
}
/** Checks for validity and shows the browser's validation message if the control is invalid. */
reportValidity() {
// This won't get called when a form is submitted. This is only for manual calls.
if (!this.validity.valid && !this.dropdown.open) {
// Show the dropdown so the browser can focus on it
this.addEventListener('wa-after-show', () => this.reportValidity(), { once: true });
this.addEventListener('wa-after-show', this.reportValidityAfterShow, { once: true });
this.dropdown.show();
if (!this.disabled) {

63
src/internal/test/form-control-base-tests.ts
View File

@@ -126,16 +126,13 @@ function runAllValidityTests(
it('should not emit an `wa-invalid` event when `.checkValidity()` is called while valid', async () => {
const control = await createControl();
const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.checkValidity());
const emittedEvents = await checkEventEmissions(control, 'wa-invalid', () => control.checkValidity());
expect(emittedEvents.length).to.equal(0);
});
it('should not emit an `wa-invalid` event when `.reportValidity()` is called while valid', async () => {
const control = await createControl();
const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.reportValidity());
// This is silly,but it fixes an issue with `reportValidity()` causing WebKit to crash.
await clickOnElement(document.body);
await aTimeout(100);
const emittedEvents = await checkEventEmissions(control, 'wa-invalid', () => control.reportValidity());
expect(emittedEvents.length).to.equal(0);
});
@@ -147,7 +144,7 @@ function runAllValidityTests(
control.setCustomValidity('error');
control.disabled = true;
await control.updateComplete;
const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.checkValidity());
const emittedEvents = await checkEventEmissions(control, 'wa-invalid', () => control.checkValidity());
expect(emittedEvents.length).to.equal(0);
});
@@ -156,10 +153,7 @@ function runAllValidityTests(
control.setCustomValidity('error');
control.disabled = true;
await control.updateComplete;
const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.reportValidity());
// This is silly,but it fixes an issue with `reportValidity()` causing WebKit to crash.
await clickOnElement(document.body);
await aTimeout(100);
const emittedEvents = await checkEventEmissions(control, 'wa-invalid', () => control.reportValidity());
expect(emittedEvents.length).to.equal(0);
});
@@ -301,10 +295,7 @@ function runSpecialTests_slButtonOfTypeButton(createControl: CreateControlFn) {
control.setCustomValidity('error');
control.disabled = false;
await control.updateComplete;
const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.checkValidity());
// This is silly,but it fixes an issue with `reportValidity()` causing WebKit to crash.
await clickOnElement(document.body);
await aTimeout(100);
const emittedEvents = await checkEventEmissions(control, 'wa-invalid', () => control.checkValidity());
expect(emittedEvents.length).to.equal(1);
});
@@ -313,11 +304,7 @@ function runSpecialTests_slButtonOfTypeButton(createControl: CreateControlFn) {
control.setCustomValidity('error');
control.disabled = false;
await control.updateComplete;
const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.reportValidity());
// This is silly,but it fixes an issue with `reportValidity()` causing WebKit to crash.
await clickOnElement(document.body);
await aTimeout(100);
const emittedEvents = await checkEventEmissions(control, 'wa-invalid', () => control.reportValidity());
expect(emittedEvents.length).to.equal(1);
});
}
@@ -345,10 +332,7 @@ function runSpecialTests_slButtonWithHref(createControl: CreateControlFn) {
const control = await createControl();
control.setCustomValidity('error');
await control.updateComplete;
const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.checkValidity());
// This is silly,but it fixes an issue with `reportValidity()` causing WebKit to crash.
await clickOnElement(document.body);
await aTimeout(100);
const emittedEvents = await checkEventEmissions(control, 'wa-invalid', () => control.checkValidity());
expect(emittedEvents.length).to.equal(1);
});
@@ -356,10 +340,7 @@ function runSpecialTests_slButtonWithHref(createControl: CreateControlFn) {
const control = await createControl();
control.setCustomValidity('error');
await control.updateComplete;
const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.reportValidity());
// This is silly,but it fixes an issue with `reportValidity()` causing WebKit to crash.
await clickOnElement(document.body);
await aTimeout(100);
const emittedEvents = await checkEventEmissions(control, 'wa-invalid', () => control.reportValidity());
expect(emittedEvents.length).to.equal(1);
});
}
@@ -394,7 +375,7 @@ function runSpecialTests_standard(createControl: CreateControlFn) {
control.setCustomValidity('error');
control.disabled = false;
await control.updateComplete;
const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.checkValidity());
const emittedEvents = await checkEventEmissions(control, 'wa-invalid', () => control.checkValidity());
expect(emittedEvents.length).to.equal(1);
});
@@ -403,10 +384,7 @@ function runSpecialTests_standard(createControl: CreateControlFn) {
control.setCustomValidity('error');
control.disabled = false;
await control.updateComplete;
const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.reportValidity());
// This is silly,but it fixes an issue with `reportValidity()` causing WebKit to crash.
await clickOnElement(document.body);
await aTimeout(100);
const emittedEvents = await checkEventEmissions(control, 'wa-invalid', () => control.reportValidity());
expect(emittedEvents.length).to.equal(1);
});
@@ -429,21 +407,26 @@ function createFormControl<T extends WebAwesomeFormControl = WebAwesomeFormContr
// Runs an action while listening for emitted events of a given type. Returns an array of all events of the given type
// that have been been emitted while the action was running.
function checkEventEmissions(control: WebAwesomeFormControl, eventType: string, action: () => void): Event[] {
function checkEventEmissions(control: WebAwesomeFormControl, eventType: string, action: () => void): Promise<Event[]> {
const emittedEvents: Event[] = [];
const eventHandler = (event: Event) => {
emittedEvents.push(event);
};
try {
control.addEventListener(eventType, eventHandler);
action();
} finally {
control.removeEventListener(eventType, eventHandler);
}
return new Promise<Event[]>((resolve) => {
(async () => {
try {
control.addEventListener(eventType, eventHandler);
action();
await aTimeout(300);
} finally {
control.removeEventListener(eventType, eventHandler);
}
return emittedEvents;
resolve(emittedEvents)
})()
})
}
// Component `wa-button` behaves quite different to the other components. To keep things simple we use simple conditions