The Curious Case of Disappearing Radio Events in LWC

by

We built an LWC form component with a search interface and a radio button group to filter results based on “Region.” The component allowed resetting the form using a handleClear() method that was intended to wipe input fields, reset states, and restore the default region.

However, after performing the reset, the radio button visually retained the selected region, but the onchange handler stopped working. Upon inspection, both event.detail and event.target were undefined in the handleRegionChange() method, despite the radio being visibly selected.

🧩 Problem

While resetting search inputs in a Lightning Web Component (LWC), the radio button filter (region selection) appeared selected visually, but the onchange event failed to fire. Both event.detail and event.target were undefined.

❓ Initial Troubleshooting and Failed Attempts:

  1. Directly setting the checked property in the regions array:
this.regions = this.regions.map(region => ({
    ...region,
    checked: region.value === this.userDefaultBu
}));

This updated the data model, but the DOM was not rerendering the change properly. The radio looked selected, but events still failed.

  1. Trying to force a rerender by adding a key to <template> tag:
<template key={radioRenderKey}>

This led to an error since key is not valid on a <template> root node in LWC. We also tried incrementing a renderKey in the JS class, but it didn’t result in the component rerendering.

🧠 Diagnosis

  • All lightning-input fields were being cleared using: jsCopyEditthis.template.querySelectorAll('lightning-input').forEach(input => { input.value = ''; });
  • This unintentionally affected radio inputs, resetting internal state without updating checked.
  • Despite regions still having data, the DOM was not reflecting valid selection. Events failed since value binding was lost in rendering.

🔧 Fix

Instead of blindly resetting all inputs, we refined the logic to skip radio buttons unless updating them intentionally:

this.template.querySelectorAll('lightning-input').forEach(input => {
    if (input.type === 'radio' && input.value === this.userDefaultBu) {
        input.checked = true;
    } else if (input.type !== 'radio') {
        input.value = '';
        input.setCustomValidity('');
        input.reportValidity();
    }
});

This preserved the radio’s state and allowed onchange events to fire correctly.

🚀 Lesson

When resetting LWC form inputs, treat radio buttons separately. They manage their own checked state, and forcibly setting input.value = '' can lead to silent errors. As an ending note to this study I would like to quote Occam’s razor, or ‘the principle of parsimony’, that tells us that the simplest, most elegant explanation is usually the one closest to the truth.”

Leave a Reply