fix: filter menu not opening in snippet search (#10229)

This commit is contained in:
akash-codemonk 2022-01-10 09:55:05 +05:30 committed by GitHub
parent c711e39849
commit c533d26a94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 3 deletions

View File

@ -1,6 +1,7 @@
/* eslint-disable cypress/no-unnecessary-waiting */
const commonlocators = require("../../../../locators/commonlocators.json");
const dsl = require("../../../../fixtures/MultipleWidgetDsl.json");
const globalSearchLocators = require("../../../../locators/GlobalSearch.json");
describe("GlobalSearch", function() {
before(() => {
@ -11,6 +12,14 @@ describe("GlobalSearch", function() {
cy.startRoutesForDatasource();
});
it("Clicking on filter should show the filter menu", () => {
cy.get(commonlocators.globalSearchTrigger).click({ force: true });
cy.contains(globalSearchLocators.docHint, "Snippets").click();
cy.get(globalSearchLocators.filterButton).click();
cy.contains("Reset Filter").should("be.visible");
cy.get("body").type("{esc}");
});
it("1. showsAndHidesUsingKeyboardShortcuts", () => {
// wait for the page to load
cy.get(commonlocators.canvas);

View File

@ -0,0 +1,4 @@
{
"docHint": ".t--docHit",
"filterButton": ".t--filter-button"
}

View File

@ -133,7 +133,8 @@ function SnippetsFilter({ refinements, snippetsEmpty }: any) {
const ref = useRef<HTMLDivElement>(null);
const handleOutsideClick = useCallback(
(e: MouseEvent) => {
if (ref && !ref.current?.contains(e?.target as Node))
// Check if the clicked element has the `ref` element in the path(i.e parent list).
if (ref && !e.composedPath().includes(ref?.current as EventTarget))
toggleSnippetFilter(false);
},
[showSnippetFilter],
@ -161,7 +162,7 @@ function SnippetsFilter({ refinements, snippetsEmpty }: any) {
snippetsEmpty={snippetsEmpty}
>
<button
className="flex items-center justify-center space-x-1"
className="flex items-center justify-center space-x-1 t--filter-button"
onClick={() => toggleSnippetFilter(!showSnippetFilter)}
>
{!showSnippetFilter && <FilterIcon />}
@ -175,7 +176,7 @@ function SnippetsFilter({ refinements, snippetsEmpty }: any) {
{!showSnippetFilter && <span> Filter</span>}
{showSnippetFilter && <CloseFilterIcon />}
</button>
<div className="filter-list">
<div className="filter-list t--filter-list">
<div
className="container"
onClick={(e: React.MouseEvent) => {