This codes removes the focus from the select element after you click it:
const select = document.querySelector('select');
select.addEventListener('focus', () => {
select.blur();
});<select>
<option>Option 1</option>
<option>Option 2</option>
</select>Is it possible to change it so that it won't be necessary to assign a constant/variable first?
Something like this:
// pseudocode
document.querySelector('select').addEventListener('focus', () => {
EventTarget.blur();
});
(And of course, I don't mean
document.querySelector('select').addEventListener('focus', () => {
document.querySelector('select').blur();
});
)
yes it is possible. just modify your code a bit.
document.querySelector('select').addEventListener('focus', (e) => {
e.target.blur();
});<select>
<option>Option 1</option>
<option>Option 2</option>
</select>You can do it with event.target from function params
document.querySelector('select').addEventListener('focus', (event) => {
event.target.blur();
});<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>