fix(general): fix modal filter and pattern input on mobile (#499)

src/components/search/FilterPanel/FilterModalMobile.jsx

@@ -27,7 +27,7 @@ export const FilterModalMobile = ({ filter, rightsHoldersList }) => {
     updateFilter
   } = useFilter();
 
-  const { types, themes, rightsHolders, sortBy, direction } = {
+  const { types, themes, pattern, rightsHolders, sortBy, direction } = {
     ...defaultFilterValues,
     ...filter
   };
@@ -74,7 +74,7 @@ export const FilterModalMobile = ({ filter, rightsHoldersList }) => {
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
-                onFilterDispatch({ sortBy, direction });
+                onFilterDispatch({ sortBy, direction, pattern });
                 clearFilter({});
               }}
               data-bs-dismiss="modal"
@@ -86,7 +86,7 @@ export const FilterModalMobile = ({ filter, rightsHoldersList }) => {
               className="btn d-flex flex-row align-items-center text-primary p-0"
               type="button"
               data-bs-dismiss="modal"
-              onClick={() => clearFilter({})}
+              onClick={() => updateFilter({ types, themes, rightsHolders })}
               aria-label="Chiudi finestra modale"
             >
               Chiudi

src/components/search/PatternFilter/PatternFilter.js

@@ -1,14 +1,18 @@
-import React, { useState } from "react";
-import { func } from "prop-types";
+import React, { useEffect, useState } from "react";
+import { func, string } from "prop-types";
 import sprite from "../../../assets/images/sprite.svg";
 import "./PatternFilter.css";
 import { isMobile } from "../../common/ResponsiveViews";
 
-const PatternFilter = ({ onPatternUpdate }) => {
+const PatternFilter = ({ pattern, onPatternUpdate }) => {
   const [value, setValue] = useState("");
 
   const title = "Cerca per parola chiave";
 
+  useEffect(() => {
+    if (pattern && pattern != "" && isMobile) setValue(pattern);
+  }, []);
+
   return (
     <div className="mt-4" data-testid="FilterPatternSection">
       <h2 className={`titlePattern`} id={title.split(" ").join("_")}>
@@ -42,7 +46,7 @@ const PatternFilter = ({ onPatternUpdate }) => {
               </span>
               <input
                 role="searchbox"
-                type="text"
+                type={isMobile ? "search" : "text"}
                 className="form-control"
                 style={{ paddingLeft: "2.2rem" }}
                 id="pattern-input"
@@ -73,7 +77,8 @@ const PatternFilter = ({ onPatternUpdate }) => {
 };
 
 PatternFilter.propTypes = {
-  onPatternUpdate: func.isRequired
+  onPatternUpdate: func.isRequired,
+  pattern: string
 };
 
 PatternFilter.defaultProps = {};

src/components/search/SearchPage/SearchPage.js

@@ -83,7 +83,10 @@ const SearchPage = () => {
         <div className="col-12 pb-lg-4" role="search">
           <div className="row mx-0 d-flex justify-content-center">
             <div className="px-0">
-              <PatternFilter onPatternUpdate={onPatternUpdate} />
+              <PatternFilter
+                pattern={filter?.pattern ?? ""}
+                onPatternUpdate={onPatternUpdate}
+              />
             </div>
           </div>
           <ShowOnDesktop>