In the Chrome browser on Windows, when a <select> element receives focus, pressing the ENTER key will reveal the list of options. However, this is not the case on Mac. So far I have not found a way to do this programmatically, short of building a custom solution.
Below are the different approaches I have tried:
document.addEventListener('DOMContentLoaded', () => {
// Approach 1: Native Focus + Click
const select1 = document.getElementById('select1');
select1.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
console.log('Approach 1: Native Focus + Click');
select1.focus();
select1.click();
}
});
// Approach 2: Native Focus + Mousedown
const select2 = document.getElementById('select2');
select2.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
console.log('Approach 2: Native Focus + Mousedown');
select2.focus();
const mousedownEvent = new MouseEvent('mousedown', {
bubbles: true,
cancelable: true,
view: window,
});
select2.dispatchEvent(mousedownEvent);
}
});
// Approach 3: Native Focus + Simulate ArrowDown
const select3 = document.getElementById('select3');
select3.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
console.log('Approach 3: Native Focus + Simulate ArrowDown');
select3.focus();
const arrowDownEvent = new KeyboardEvent('keydown', {
key: 'ArrowDown',
code: 'ArrowDown',
keyCode: 40,
bubbles: true,
cancelable: true,
});
select3.dispatchEvent(arrowDownEvent)
}
});
// Approach 4: Custom Dropdown
const customDropdown = document.getElementById('custom-dropdown');
const customOptions = document.getElementById('custom-options');
const customSelected = document.getElementById('custom-selected');
customDropdown.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
console.log('Approach 4: Custom Dropdown (Simulated)');
const isExpanded = customDropdown.getAttribute('aria-expanded') === 'true';
customDropdown.setAttribute('aria-expanded', !isExpanded);
customOptions.hidden = isExpanded;
}
});
customOptions.addEventListener('click', (event) => {
customSelected.textContent = event.target.textContent;
customDropdown.setAttribute('aria-expanded', 'false');
customOptions.hidden = true;
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Experiment with Dropdown Approaches</title>
</head>
<body>
<h1>Select Dropdown Approaches</h1>
<p>Focus on each dropdown and press <strong>Enter</strong>. Check the console to see logs and experiment with different approaches.</p>
<div>
<h2>Approach 1: Native Focus + Click</h2>
<label for="select1">Dropdown:</label>
<select id="select1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div>
<h2>Approach 2: Native Focus + Mousedown</h2>
<label for="select2">Dropdown:</label>
<select id="select2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div>
<h2>Approach 3: Native Focus + Simulate ArrowDown</h2>
<label for="select3">Dropdown:</label>
<select id="select3">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div>
<h2>Approach 4: Custom Dropdown (Simulated)</h2>
<div id="custom-dropdown" tabindex="0" role="combobox" aria-expanded="false">
<div id="custom-selected">Select an option</div>
<ul id="custom-options" role="listbox" hidden>
<li role="option">Option 1</li>
<li role="option">Option 2</li>
<li role="option">Option 3</li>
</ul>
</div>
</div>
</body>
</html>3