Roam JavaScript to focus on search box when opening a filter

filter-focus.js

document.addEventListener('click', function (evt) {
    if (evt.target.className === 'bp3-icon bp3-icon-filter') {
        function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }

        async function removeFilters(event) {
            var filteredButtons = event.target.parentElement.parentElement.parentElement.getElementsByTagName('BUTTON')

            if (filteredButtons.length == 0 || filteredButtons == null) { return }
            var loopCtr = 0
            do {
                var eachButton = filteredButtons[0]
                eachButton.click()
                await sleep(50);
                loopCtr++
            } while (filteredButtons.length > 0 && loopCtr < 50)
        }

        async function selectBox() {
            await sleep(200);
            //console.log("Clicked filter button")
            //Check if filter search input box is there
            var tbInputSearch = document.getElementsByClassName("bp3-input bp3-minimal search-input");

            if (tbInputSearch !== null && tbInputSearch !== 'undefined' && typeof tbInputSearch !== 'undefined') {
                var tbInputSearchFocus = tbInputSearch[0]
                if (tbInputSearchFocus !== null && tbInputSearchFocus !== 'undefined' && typeof tbInputSearchFocus !== 'undefined') {
                    //console.log("Found and focusing now...")
                    tbInputSearchFocus.focus();
                    tbInputSearchFocus.addEventListener("keyup", function (event) {
                        if (event.key === "Enter") {
                            if (tbInputSearchFocus.nextElementSibling.childNodes[0]) { tbInputSearchFocus.nextElementSibling.childNodes[0].click() }
                        }
                    })
                }
                else {
                    await sleep(200);
                    tbInputSearchFocus = document.getElementsByClassName("bp3-transition-container bp3-popover-enter-done")[0];
                }

                if (tbInputSearchFocus !== null && tbInputSearchFocus !== 'undefined' && typeof tbInputSearchFocus !== 'undefined') {
                    var filterBox = tbInputSearchFocus.parentElement.getElementsByTagName('STRONG')
                    if (filterBox) { if (filterBox[0].innerText == 'Includes') { var foundBox = filterBox[0] } }
                    var newIcon = document.createElement("span")
                    newIcon.className = 'bp3-icon-filter-remove'
                    newIcon.style.cssText = 'margin:0 -7px;font-family:Icons20;font-weight:400'
                    newIcon.onclick = function (event) {
                        removeFilters(event)
                    }
                    var iconHolder = document.createElement("span")
                    iconHolder.className = 'bp3-button bp3-minimal bp3-small'
                    iconHolder.style.float = 'right'
                    iconHolder.appendChild(newIcon)
                    foundBox.parentNode.insertBefore(iconHolder, foundBox)

                    if (filterBox) { if (filterBox[1].innerText == 'Removes') { var foundBox2 = filterBox[1] } }
                    var newIcon2 = document.createElement("span")
                    newIcon2.className = 'bp3-icon-filter-remove'
                    newIcon2.style.cssText = 'margin:0 -7px;font-family:Icons20;font-weight:400'
                    newIcon2.onclick = function (event) {
                        removeFilters(event)
                    }
                    var iconHolder2 = document.createElement("span")
                    iconHolder2.className = 'bp3-button bp3-minimal bp3-small'
                    iconHolder2.style.float = 'right'
                    iconHolder2.appendChild(newIcon2)
                    foundBox2.parentNode.insertBefore(iconHolder2, foundBox2)
                }
            }
        }
        selectBox();
    }

    if (evt.target.className === 'bp3-button') {
        var clickedElem = evt.target
        //console.log("Clicked one of the filter choices")

        //Check to make sure it is a button that is part of the filter box so that we don't run code on other buttons in Roam that may have the bp3-button class
        //This check is probably unnecessary but I like to be sure since who know how the future of Roam changes things
        var parentNode4Class = clickedElem.parentElement.parentElement.parentElement.parentElement.className
        var parentNode5Class = clickedElem.parentElement.parentElement.parentElement.parentElement.parentElement.className
        if (parentNode4Class == 'bp3-popover-content' || parentNode4Class == 'bp3-popover' || parentNode5Class == 'bp3-popover' || parentNode5Class == 'bp3-popover-content') {
            //console.log("Confirmed click of a filter page reference button")
            var tbInputSearch = document.getElementsByClassName("bp3-input bp3-minimal search-input");
            if (tbInputSearch !== null && tbInputSearch !== 'undefined' && typeof tbInputSearch !== 'undefined') {
                var tbInputSearchFocus = tbInputSearch[0]
                if (tbInputSearchFocus !== null && tbInputSearchFocus !== 'undefined' && typeof tbInputSearchFocus !== 'undefined') {
                    tbInputSearchFocus.focus();
                    tbInputSearchFocus.select();
                }
            }
        }
    }
});

Since the new update broke my "auto focus on search box" when clicking filters so you can start typing without using mouse to activate the search box, I decided to add some more features that allow you to use the filters without much mouse need which helps get around the bug.

• Auto focuses cursor in the search/input box when opening a filter.
• when typing, press ENTER key and it will auto add the first item in the list/results so you don't have to use your mouse all the time.
• added a filter clear button so that it will remove all filters so you dont have to click them one at a time.