diff --git a/src/components/radio-group/radio-group.component.ts b/src/components/radio-group/radio-group.component.ts index 37dc2481e..0027591e9 100644 --- a/src/components/radio-group/radio-group.component.ts +++ b/src/components/radio-group/radio-group.component.ts @@ -84,17 +84,18 @@ export default class WaRadioGroup extends WebAwesomeFormAssociated { super() this.addEventListener("keydown", this.handleKeyDown) - this.addEventListener('click', this.handleClick); + this.addEventListener('click', this.handleRadioClick); } - private handleClick = (e: Event) => { + private handleRadioClick = (e: Event) => { const clickedRadio = (e.target as HTMLElement).closest("wa-radio, wa-radio-button") if (!clickedRadio) return if (clickedRadio.disabled) { return } - clickedRadio.checked = true; + const oldValue = this.value this.value = clickedRadio.value + clickedRadio.checked = true; const radios = this.getAllRadios() const hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'wa-radio-button'); @@ -107,6 +108,11 @@ export default class WaRadioGroup extends WebAwesomeFormAssociated { radio.tabIndex = -1; } } + + if (this.value !== oldValue) { + this.emit('wa-change'); + this.emit('wa-input'); + } }; @@ -209,7 +215,6 @@ export default class WaRadioGroup extends WebAwesomeFormAssociated { this.syncRadioElements() } - // @TODO: Move this private handleKeyDown(event: KeyboardEvent) { if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) { return; @@ -217,12 +222,6 @@ export default class WaRadioGroup extends WebAwesomeFormAssociated { event.preventDefault() - if (event.key === " ") { - event.preventDefault() - this.handleClick(event) - return - } - const radios = this.getAllRadios().filter(radio => !radio.disabled); if (radios.length <= 0) { return } diff --git a/src/components/radio-group/radio-group.test.ts b/src/components/radio-group/radio-group.test.ts index 9b437f106..9eaffa5b2 100644 --- a/src/components/radio-group/radio-group.test.ts +++ b/src/components/radio-group/radio-group.test.ts @@ -213,24 +213,16 @@ describe('when submitting a form', () => { - Submit `); - const button = form.querySelector('wa-button')!; + const radio = form.querySelectorAll('wa-radio')[1]; - const submitHandler = sinon.spy((event: SubmitEvent) => { - formData = new FormData(form); - - event.preventDefault(); - }); - let formData: FormData; - - form.addEventListener('submit', submitHandler); radio.click(); - button.click(); - await waitUntil(() => submitHandler.calledOnce); - expect(formData!.get('a')).to.equal('2'); + await form.querySelector("wa-radio-group")?.updateComplete + + const formData = new FormData(form) + expect(formData.get('a')).to.equal('2'); }); it('should be present in form data when using the form attribute and located outside of a
', async () => { @@ -366,7 +358,8 @@ describe('when the value changes', () => { await radioGroup.updateComplete; }); - it('should relatively position content to prevent visually hidden scroll bugs', async () => { + // I think we can delete this?? We no longer need to have a hidden form control to mimic formAssociation. + it.skip('should relatively position content to prevent visually hidden scroll bugs', async () => { // // See https://github.com/shoelace-style/shoelace/issues/1380 // diff --git a/src/internal/webawesome-element.ts b/src/internal/webawesome-element.ts index 06f169dbb..3370ab7be 100644 --- a/src/internal/webawesome-element.ts +++ b/src/internal/webawesome-element.ts @@ -191,16 +191,12 @@ export class WebAwesomeFormAssociated { static formAssociated = true; - // static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; - /** * Validators are static because they have `observedAttributes`, essentially attributes to "watch" * for changes. Whenever these attributes change, we want to be notified and update the validator. */ static get validators(): Validator[] { - return [ - // ValueMissingValidator() - ]; + return []; } // Append all Validator "observedAttributes" into the "observedAttributes" so they can run.