diff --git a/src/components/radio-group/radio-group.component.ts b/src/components/radio-group/radio-group.component.ts index fe454de79..37dc2481e 100644 --- a/src/components/radio-group/radio-group.component.ts +++ b/src/components/radio-group/radio-group.component.ts @@ -1,6 +1,6 @@ import { classMap } from 'lit/directives/class-map.js'; import { HasSlotController } from '../../internal/slot.js'; -import { html } from 'lit'; +import { html, LitElement } from 'lit'; import { property, query, state } from 'lit/decorators.js'; import { RequiredValidator } from '../../internal/validators/required-validator.js'; import { watch } from '../../internal/watch.js'; @@ -12,7 +12,6 @@ import WaButtonGroup from '../button-group/button-group.component.js'; import type { CSSResultGroup } from 'lit'; import type WaRadio from '../radio/radio.js'; import type WaRadioButton from '../radio-button/radio-button.js'; -import { LitElement } from 'lit'; /** * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control. @@ -77,7 +76,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociated { /** * We need this because if we don't have it, FormValidation yells at us that it's "not focusable". - * If use `this.tabIndex = -1` we can't focus the radio inside. + * If we use `this.tabIndex = -1` we can't focus the radio inside. */ static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true } @@ -186,6 +185,10 @@ export default class WaRadioGroup extends WebAwesomeFormAssociated { } } + /** + * We use the first available radio as the validationTarget similar to native HTML that shows the validation popup on + * the first radio element. + */ get validationTarget () { return this.querySelector(':is(wa-radio, wa-radio-button):not([disabled])') || undefined; } diff --git a/src/components/radio/radio.component.ts b/src/components/radio/radio.component.ts index c918dc692..f0720e1db 100644 --- a/src/components/radio/radio.component.ts +++ b/src/components/radio/radio.component.ts @@ -67,7 +67,6 @@ export default class WaRadio extends WebAwesomeFormAssociated { super(); this.addEventListener('blur', this.handleBlur); this.addEventListener('focus', this.handleFocus); - this.internals.role = "radio" } connectedCallback() { @@ -91,12 +90,6 @@ export default class WaRadio extends WebAwesomeFormAssociated { this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false'); } - @watch(["value", "checked"]) - handleValueOrCheckedChange () { - this.setValue(this.value, this.value) - this.updateValidity() - } - @watch('checked') handleCheckedChange() { this.setAttribute('aria-checked', this.checked ? 'true' : 'false'); @@ -105,15 +98,9 @@ export default class WaRadio extends WebAwesomeFormAssociated { /** * @override - * We only want to set values when checked. */ - setValue(...args: Parameters): void { - if (!this.checked) { - super.setValue(null, null) - return - } - - super.setValue(...args) + setValue(): void { + // We override `setValue` because we don't want to set form values from here. We want to do that in "RadioGroup" itself. } @watch('disabled', { waitUntilFirstUpdate: true })