Changing the setting of any user interface component (like selecting a radio button, checking a box, entering text) must not automatically cause a change of context unless the user has been advised of the behavior before using the component.
Why It Matters
Similar to “On Focus,” unexpected changes triggered merely by interacting with a control (before explicitly submitting or confirming) can be disorienting. Users may accidentally trigger actions while exploring options or making selections, leading to confusion, data loss, or navigation errors.
Fixing the Issue
Avoid triggering context changes directly from onchange, onclick (for checkboxes/radio buttons), or similar events on form elements. Actions like submitting forms, navigating, or significantly changing layout should typically wait for an explicit activation command, like clicking a “Submit,” “Go,” or “Update” button. If a component must trigger a change on input (e.g., a dropdown that reloads part of the page), clearly explain this behavior in text before the component so the user anticipates it.
Good Code Example
A dropdown that filters content, triggered by a separate button:
<label for="category-select">Filter by Category:</label>
<select id="category-select" name="category">
<option value="all">All</option>
<option value="electronics">Electronics</option>
<option value="clothing">Clothing</option>
</select>
<button type="button" onclick="applyFilter()">Apply Filter</button>
<div id="results">
</div>
<script>
function applyFilter() {
const selectedCategory = document.getElementById('category-select').value;
console.log("Filtering results for:", selectedCategory);
// Logic to update the content in the #results div based on selection
// This change of context is expected because the user clicked "Apply Filter".
}
</script>
Bad Code Example
A select dropdown that automatically navigates when an option is chosen:
