Merge pull request #1539 from ral-facilities/search-history-#1471

Autocomplete Recent Searches
ral-facilities · Jul 7, 2023 · e0c4fe5 · e0c4fe5
2 parents f16bc59 + 1288b4a
commit e0c4fe5
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 26 deletions.
diff --git a/packages/datagateway-search/src/__snapshots__/searchBoxContainer.component.test.tsx.snap b/packages/datagateway-search/src/__snapshots__/searchBoxContainer.component.test.tsx.snap
@@ -32,6 +32,7 @@ exports[`SearchBoxContainerSide - Tests renders searchBoxContainerSide correctly
               aria-label="searchBox.search_text_arialabel"
               class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch css-1g24dm6-MuiInputBase-input-MuiOutlinedInput-input"
               id="filled-search"
+              name="dgSearchTextField"
               type="search"
               value=""
             />
@@ -245,7 +246,7 @@ exports[`SearchBoxContainerSide - Tests renders searchBoxContainerSide correctly
             aria-label="searchBox.search_button_arialabel"
             class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-fullWidth css-189e9pj-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
-            type="button"
+            type="submit"
           >
             searchBox.search_button
             <span

diff --git a/packages/datagateway-search/src/search/__snapshots__/searchButton.component.test.tsx.snap b/packages/datagateway-search/src/search/__snapshots__/searchButton.component.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Search Button component tests renders correctly 1`] = `
       aria-label="searchBox.search_button_arialabel"
       class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-fullWidth css-189e9pj-MuiButtonBase-root-MuiButton-root"
       tabindex="0"
-      type="button"
+      type="submit"
     >
       searchBox.search_button
       <span

diff --git a/packages/datagateway-search/src/search/__snapshots__/searchTextBox.component.test.tsx.snap b/packages/datagateway-search/src/search/__snapshots__/searchTextBox.component.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`Search text box component tests renders correctly 1`] = `
         aria-label="searchBox.search_text_arialabel"
         class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch css-1g24dm6-MuiInputBase-input-MuiOutlinedInput-input"
         id="filled-search"
+        name="dgSearchTextField"
         type="search"
         value=""
       />

diff --git a/packages/datagateway-search/src/search/searchButton.component.tsx b/packages/datagateway-search/src/search/searchButton.component.tsx
@@ -26,6 +26,7 @@ const SearchButton = (props: SearchButtonCombinedProps): React.ReactElement => {
         aria-label={t('searchBox.search_button_arialabel')}
         size="large"
         fullWidth={true}
+        type="submit"
       >
         {t('searchBox.search_button')}
       </Button>

diff --git a/packages/datagateway-search/src/search/searchTextBox.component.tsx b/packages/datagateway-search/src/search/searchTextBox.component.tsx
@@ -25,6 +25,7 @@ const SearchTextBox = (props: SearchTextProps): React.ReactElement => {
     <TextField
       className="tour-search-textfield"
       id="filled-search"
+      name="dgSearchTextField"
       label={t('searchBox.search_text')}
       type="search"
       margin="normal"

diff --git a/packages/datagateway-search/src/searchBoxContainer.component.tsx b/packages/datagateway-search/src/searchBoxContainer.component.tsx
@@ -38,35 +38,41 @@ const SearchBoxContainer = (
 
   return (
     <ContainerBox data-testid="search-box-container">
-      <Grid
-        container
-        direction="row"
-        justifyContent="center"
-        id="container-searchbox"
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+        }}
       >
-        <Grid item xs="auto" style={{ flexGrow: 1 }}>
-          <SearchTextBox
-            searchText={searchText}
-            initiateSearch={initiateSearch}
-            onChange={onSearchTextChange}
-          />
-        </Grid>
+        <Grid
+          container
+          direction="row"
+          justifyContent="center"
+          id="container-searchbox"
+        >
+          <Grid item xs="auto" style={{ flexGrow: 1 }}>
+            <SearchTextBox
+              searchText={searchText}
+              initiateSearch={initiateSearch}
+              onChange={onSearchTextChange}
+            />
+          </Grid>
 
-        <Grid item sx={{ marginTop: '8px' }}>
-          <CheckboxesGroup />
-        </Grid>
+          <Grid item sx={{ marginTop: '8px' }}>
+            <CheckboxesGroup />
+          </Grid>
 
-        <Grid item sx={{ marginTop: '8px' }}>
-          <SelectDates initiateSearch={initiateSearch} />
-        </Grid>
+          <Grid item sx={{ marginTop: '8px' }}>
+            <SelectDates initiateSearch={initiateSearch} />
+          </Grid>
 
-        <Grid
-          item
-          sx={{ display: 'flex', marginTop: '24px', marginLeft: '6px' }}
-        >
-          <SearchButton initiateSearch={initiateSearch} />
+          <Grid
+            item
+            sx={{ display: 'flex', marginTop: '24px', marginLeft: '6px' }}
+          >
+            <SearchButton initiateSearch={initiateSearch} />
+          </Grid>
         </Grid>
-      </Grid>
+      </form>
       <div style={{ display: 'flex' }}>
         <Typography
           sx={{