I have the following code:
var parentAction = document.querySelector("[title='Actions for Tab']");
var refreshButton = parentAction.getElementsByClassName("slds-truncate")[0].click();
This causes a specific tab to refresh on a website. I have it set up in a function with an interval set to run every 60 seconds. This runs without any issues.
However, a lot of the time this function will run while a user is typing in an input field. When the click happens it takes focus from the user typing and causes random windows to open on the page because of the keys they press. If they're not typing at the time, it's fine. They just have to click back into the input field and continue. This does get frustrating after a short time though.
Is there a better way to simulate the click event without taking focus from the input field they're typing in?
If the tab refreshes through ajax then why not just call a method triggering the refresh action.
If you have to go that route: The following is workaround that bypasses the refresh amidst user action; it also includes a timer that kicks if user leaves during form dabblings.
var i = document.querySelector('input')
var inputFocus = false, pageTimer;
i.onfocus = () => {
inputFocus = true;
pageIdle()
}
i.onblur = () => { pageIdle() }
let refreshPage = () => {
if (!inputFocus) console.log('page refresh')
}
let pageIdle = () => {
console.log('user typing')
if(pageTimer) clearTimeout(pageTimer)
pageTimer = setTimeout(() => { inputFocus = false}, 6000) << refreshes when users idles
}
setInterval(refreshPage, 2000) << refreshes regularly
document.onkeydown = () => {
inputFocus = true
pageIdle()
}