I have a table and each row has one or more user inputs with a focusout
event listener attached, that calls a function:
function inputFocusOut(event, el) {
let row = el.closest('tr');
let curFocus = event.relatedTarget;
let moveOn = true;
if(focus was on dynamically added row) {
// I have another way of handling these
moveOn = false;
} else if(curFocus) {
// Check if in same row
if(in same row) {
moveOn = false;
}
} else if(el.nodeName === 'INPUT' && el.type === 'file') {
// If focus on file picker, moveOn = false;
}
if(moveOn) {
// Check if values changed and do more stuff if anything did change
}
}
The function works great for everything except input[type='file']
. When you click to upload a file, the focus is on the file picker dialogue, so the input loses focus, triggering the function.
Is it possible to know when focus is on the file browser window, in which case I don’t want to continue with the rest of the logic? The event.relatedTarget
is undefined when the file picker is open, so I’m not sure what I would check.
I found this question, but the answer talks about putting focus on the input and blurring it, which I’m already doing (albeit with focuout
instead of blur
). Haven’t been able to find anything helpful, which could mean I’m not use the best search terms.
Any help in JavaScript
or jQuery
would be appreciated.