From 947f9837d532017f5dcb3f25826ea56d6bb2e93b Mon Sep 17 00:00:00 2001
From: sabrina-bongiovanni
 <116291154+sabrina-bongiovanni@users.noreply.github.com>
Date: Wed, 27 Dec 2023 14:57:07 +0100
Subject: [PATCH] fix: allow submit when pressing enter key in search blocks
 (#451)

---
 .../ItaliaTheme/Blocks/BandiSearch/Body.jsx   | 92 ++++++++++---------
 .../ItaliaTheme/Blocks/EventSearch/Body.jsx   | 92 ++++++++++---------
 .../ItaliaTheme/Blocks/UOSearch/Body.jsx      | 92 ++++++++++---------
 3 files changed, 147 insertions(+), 129 deletions(-)

diff --git a/src/components/ItaliaTheme/Blocks/BandiSearch/Body.jsx b/src/components/ItaliaTheme/Blocks/BandiSearch/Body.jsx
index d9b9573d2..b12cef130 100644
--- a/src/components/ItaliaTheme/Blocks/BandiSearch/Body.jsx
+++ b/src/components/ItaliaTheme/Blocks/BandiSearch/Body.jsx
@@ -149,54 +149,60 @@ const Body = ({ data, inEditMode, path, onChangeBlock }) => {
           'public-ui': inEditMode,
         })}
       >
-        <div className="d-flex justify-content-center">
-          <div className="d-flex search-container align-items-center justify-content-center flex-wrap">
-            {filterOne && (
-              <>
-                {React.createElement(filterOne.widget.component, {
-                  ...filterOne.widget?.props,
-                  id: 'filterOne',
-                  onChange: (filter, value) => {
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            doRequest(1);
+          }}
+        >
+          <div className="d-flex justify-content-center">
+            <div className="d-flex search-container align-items-center justify-content-center flex-wrap">
+              {filterOne && (
+                <>
+                  {React.createElement(filterOne.widget.component, {
+                    ...filterOne.widget?.props,
+                    id: 'filterOne',
+                    onChange: (filter, value) => {
+                      dispatchFilter({
+                        filter: filter,
+                        value: value,
+                      });
+                    },
+                  })}
+                </>
+              )}
+              {filterTwo &&
+                React.createElement(filterTwo.widget?.component, {
+                  ...filterTwo.widget?.props,
+                  id: 'filterTwo',
+                  onChange: (filter, value) =>
                     dispatchFilter({
                       filter: filter,
                       value: value,
-                    });
-                  },
+                    }),
                 })}
-              </>
-            )}
-            {filterTwo &&
-              React.createElement(filterTwo.widget?.component, {
-                ...filterTwo.widget?.props,
-                id: 'filterTwo',
-                onChange: (filter, value) =>
-                  dispatchFilter({
-                    filter: filter,
-                    value: value,
-                  }),
-              })}
-            {filterThree &&
-              React.createElement(filterThree.widget?.component, {
-                ...filterThree.widget?.props,
-                id: 'filterThree',
-                onChange: (filter, value) =>
-                  dispatchFilter({
-                    filter: filter,
-                    value: value,
-                  }),
-              })}
-
-            <Button
-              color={data.button_color || 'tertiary'}
-              icon={false}
-              tag="button"
-              onClick={() => doRequest(1)}
-              className="my-2 my-lg-1"
-            >
-              {intl.formatMessage(messages.find)}
-            </Button>
+              {filterThree &&
+                React.createElement(filterThree.widget?.component, {
+                  ...filterThree.widget?.props,
+                  id: 'filterThree',
+                  onChange: (filter, value) =>
+                    dispatchFilter({
+                      filter: filter,
+                      value: value,
+                    }),
+                })}
+
+              <Button
+                color={data.button_color || 'tertiary'}
+                icon={false}
+                tag="button"
+                className="my-2 my-lg-1"
+              >
+                {intl.formatMessage(messages.find)}
+              </Button>
+            </div>
           </div>
-        </div>
+        </form>
       </div>
 
       {!loading ? (
diff --git a/src/components/ItaliaTheme/Blocks/EventSearch/Body.jsx b/src/components/ItaliaTheme/Blocks/EventSearch/Body.jsx
index 1a769462f..2e912e6e5 100644
--- a/src/components/ItaliaTheme/Blocks/EventSearch/Body.jsx
+++ b/src/components/ItaliaTheme/Blocks/EventSearch/Body.jsx
@@ -159,54 +159,60 @@ const Body = ({ data, inEditMode, path, onChangeBlock }) => {
           'public-ui': inEditMode,
         })}
       >
-        <div className="d-flex justify-content-center">
-          <div className="d-flex search-container align-items-center justify-content-center flex-wrap">
-            {filterOne && (
-              <>
-                {React.createElement(filterOne.widget.component, {
-                  ...filterOne.widget?.props,
-                  id: 'filterOne',
-                  onChange: (filter, value) => {
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            doRequest(1);
+          }}
+        >
+          <div className="d-flex justify-content-center">
+            <div className="d-flex search-container align-items-center justify-content-center flex-wrap">
+              {filterOne && (
+                <>
+                  {React.createElement(filterOne.widget.component, {
+                    ...filterOne.widget?.props,
+                    id: 'filterOne',
+                    onChange: (filter, value) => {
+                      dispatchFilter({
+                        filter: filter,
+                        value: value,
+                      });
+                    },
+                  })}
+                </>
+              )}
+              {filterTwo &&
+                React.createElement(filterTwo.widget?.component, {
+                  ...filterTwo.widget?.props,
+                  id: 'filterTwo',
+                  onChange: (filter, value) =>
                     dispatchFilter({
                       filter: filter,
                       value: value,
-                    });
-                  },
+                    }),
                 })}
-              </>
-            )}
-            {filterTwo &&
-              React.createElement(filterTwo.widget?.component, {
-                ...filterTwo.widget?.props,
-                id: 'filterTwo',
-                onChange: (filter, value) =>
-                  dispatchFilter({
-                    filter: filter,
-                    value: value,
-                  }),
-              })}
-            {filterThree &&
-              React.createElement(filterThree.widget?.component, {
-                ...filterThree.widget?.props,
-                id: 'filterThree',
-                onChange: (filter, value) =>
-                  dispatchFilter({
-                    filter: filter,
-                    value: value,
-                  }),
-              })}
-
-            <Button
-              color={data.button_color || 'tertiary'}
-              icon={false}
-              tag="button"
-              onClick={() => doRequest(1)}
-              className="my-2 my-lg-1"
-            >
-              {intl.formatMessage(messages.find)}
-            </Button>
+              {filterThree &&
+                React.createElement(filterThree.widget?.component, {
+                  ...filterThree.widget?.props,
+                  id: 'filterThree',
+                  onChange: (filter, value) =>
+                    dispatchFilter({
+                      filter: filter,
+                      value: value,
+                    }),
+                })}
+
+              <Button
+                color={data.button_color || 'tertiary'}
+                icon={false}
+                tag="button"
+                className="my-2 my-lg-1"
+              >
+                {intl.formatMessage(messages.find)}
+              </Button>
+            </div>
           </div>
-        </div>
+        </form>
       </div>
 
       {!loading ? (
diff --git a/src/components/ItaliaTheme/Blocks/UOSearch/Body.jsx b/src/components/ItaliaTheme/Blocks/UOSearch/Body.jsx
index 74606a6ae..5077b0783 100644
--- a/src/components/ItaliaTheme/Blocks/UOSearch/Body.jsx
+++ b/src/components/ItaliaTheme/Blocks/UOSearch/Body.jsx
@@ -143,54 +143,60 @@ const Body = ({ data, inEditMode, path, onChangeBlock }) => {
           'public-ui': inEditMode,
         })}
       >
-        <div className="d-flex justify-content-center">
-          <div className="d-flex search-container align-items-center justify-content-center flex-wrap">
-            {filterOne && (
-              <>
-                {React.createElement(filterOne.widget.component, {
-                  ...filterOne.widget?.props,
-                  id: 'filterOne',
-                  onChange: (filter, value) => {
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            doRequest(1);
+          }}
+        >
+          <div className="d-flex justify-content-center">
+            <div className="d-flex search-container align-items-center justify-content-center flex-wrap">
+              {filterOne && (
+                <>
+                  {React.createElement(filterOne.widget.component, {
+                    ...filterOne.widget?.props,
+                    id: 'filterOne',
+                    onChange: (filter, value) => {
+                      dispatchFilter({
+                        filter: filter,
+                        value: value,
+                      });
+                    },
+                  })}
+                </>
+              )}
+              {filterTwo &&
+                React.createElement(filterTwo.widget?.component, {
+                  ...filterTwo.widget?.props,
+                  id: 'filterTwo',
+                  onChange: (filter, value) =>
                     dispatchFilter({
                       filter: filter,
                       value: value,
-                    });
-                  },
+                    }),
                 })}
-              </>
-            )}
-            {filterTwo &&
-              React.createElement(filterTwo.widget?.component, {
-                ...filterTwo.widget?.props,
-                id: 'filterTwo',
-                onChange: (filter, value) =>
-                  dispatchFilter({
-                    filter: filter,
-                    value: value,
-                  }),
-              })}
-            {filterThree &&
-              React.createElement(filterThree.widget?.component, {
-                ...filterThree.widget?.props,
-                id: 'filterThree',
-                onChange: (filter, value) =>
-                  dispatchFilter({
-                    filter: filter,
-                    value: value,
-                  }),
-              })}
-
-            <Button
-              color={data.button_color || 'tertiary'}
-              icon={false}
-              tag="button"
-              onClick={() => doRequest(1)}
-              className="my-2 my-lg-1"
-            >
-              {intl.formatMessage(messages.find)}
-            </Button>
+              {filterThree &&
+                React.createElement(filterThree.widget?.component, {
+                  ...filterThree.widget?.props,
+                  id: 'filterThree',
+                  onChange: (filter, value) =>
+                    dispatchFilter({
+                      filter: filter,
+                      value: value,
+                    }),
+                })}
+
+              <Button
+                color={data.button_color || 'tertiary'}
+                icon={false}
+                tag="button"
+                className="my-2 my-lg-1"
+              >
+                {intl.formatMessage(messages.find)}
+              </Button>
+            </div>
           </div>
-        </div>
+        </form>
       </div>
 
       {!loading ? (