Selenium returning the hidden element as visible, clickable and enabled when element is hidden & not clickable

I want to open the filters only if they are not already open. For that, I’m checking if “Apply Filter” button is visible/clickable.

To my surprise, I’m getting the element as visible/clickable even though it is not.

Button code mentioned below,

<div class="m-t-20 text-left filter-btn-holder ">
   <input type="hidden" id="filterType" value="">
   <button type="button" class="submit btn btn-primary btn-mini filter-focus" id="filterButton" onclick="javascript:getFilteredMedia(true);" "="">Filter</button>
   <button type="button" class="submit btn btn-danger btn-mini" id="filterButton" onclick="clearFilter();">Reset</button>
   <button type="button" class="submit btn btn-mini" data-webarch="toggle-right-side" id="closeButton"><i class="fa fa-times" aria-hidden="true"></i></button>
</div>

Method trying to check if element is clickable

public boolean isClickable(WebElement el) 
    {
        try{
            WebDriverWait wait = new WebDriverWait(driver, 6);
            wait.until(ExpectedConditions.elementToBeClickable(el));
            return true;
        }
        catch (Exception e){
            return false;
        }
    }

XPath of the button: xpath = "//button[@id='filterButton' and text()[contains(.,'Filter')]]

Answer

Though I didn’t get the answer exactly, found some workaround. Checked a parent element class if it’s visible or not using the javascript executor.

Still not sure why I’m getting visible for an invisible element.

JavascriptExecutor js = (JavascriptExecutor)driver;
String className = (String) js.executeScript("return document.getElementById('chat-users').getAttribute('class');");