Prevent mobile view change on location clear

lib/components/mobile/location-search.js

@@ -9,9 +9,7 @@ import React, { Component } from 'react'
 import styled from 'styled-components'
 
 import * as uiActions from '../../actions/ui'
-import { ChevronLeft } from '@styled-icons/fa-solid'
 import { MobileScreens } from '../../actions/ui-constants'
-import { StyledIconWrapper } from '../util/styledIcon'
 import LocationField from '../form/connected-location-field'
 
 import MobileContainer from './container'
@@ -29,14 +27,6 @@ const MobileLocationField = styled(LocationField)`
   }
 `
 
-const MobileLocationBackButton = styled.button`
-  background: white;
-  border: none;
-  position: absolute;
-  z-index: 100;
-  margin-top: 4px;
-`
-
 class MobileLocationSearch extends Component {
   static propTypes = {
     backScreen: PropTypes.number,
@@ -57,9 +47,6 @@ class MobileLocationSearch extends Component {
     const suppressNearby =
       otherLocation && otherLocation.category === 'CURRENT_LOCATION'
 
-    const backButtonText = intl.formatMessage({
-      id: 'components.BackToTripPlanner.backToTripPlanner'
-    })
     return (
       <MobileContainer>
         <MobileNavigationBar
@@ -73,23 +60,10 @@ class MobileLocationSearch extends Component {
                   id: 'components.LocationSearch.setOrigin'
                 })
           }
+          showBackButton
         />
         <main tabIndex={-1}>
           <div className="location-search mobile-padding">
-            <MobileLocationBackButton
-              aria-label={backButtonText}
-              className="mobile-location-back"
-              onClick={() =>
-                // eslint cannot make up its mind on where it wants the bracket to be.
-                // eslint-disable-next-line prettier/prettier
-                this.props.setMobileScreen(MobileScreens.SEARCH_FORM)}
-              title={backButtonText}
-            >
-              <StyledIconWrapper>
-                <ChevronLeft />
-              </StyledIconWrapper>
-            </MobileLocationBackButton>
-
             <MobileLocationField
               hideExistingValue
               inputPlaceholder={

lib/components/mobile/mobile.css

@@ -52,9 +52,10 @@
 }
 
 .otp .navbar .mobile-back {
+  background: transparent;
+  border: none;
   position: fixed;
-  top: 12px;
-  left: 15px;
+  left: 7px;
   color: white;
   font-size: 18px;
 }

lib/components/mobile/navigation-bar.js

@@ -8,6 +8,7 @@ import styled from 'styled-components'
 import * as uiActions from '../../actions/ui'
 import { accountLinks, getAuth0Config } from '../../util/auth'
 import { ComponentContext } from '../../util/contexts'
+import { injectIntl } from 'react-intl'
 import { StyledIconWrapper } from '../util/styledIcon'
 import AppMenu from '../app/app-menu'
 import LocaleSelector from '../app/locale-selector'
@@ -29,6 +30,7 @@ class MobileNavigationBar extends Component {
     extraMenuItems: PropTypes.array,
     headerAction: PropTypes.element,
     headerText: PropTypes.string,
+    intl: PropTypes.object,
     locale: PropTypes.string,
     onBackClicked: PropTypes.func,
     setMobileScreen: PropTypes.func,
@@ -51,21 +53,28 @@ class MobileNavigationBar extends Component {
       extraMenuItems,
       headerAction,
       headerText,
+      intl,
       locale,
       showBackButton
     } = this.props
 
+    const backButtonText = intl.formatMessage({ id: 'common.forms.back' })
+
     return (
       <header>
         <Navbar className="mobile-navbar-container" fixedTop fluid>
           <Navbar.Header>
             <Navbar.Brand>
               {showBackButton ? (
-                <div className="mobile-back">
+                <button
+                  aria-label={backButtonText}
+                  className="mobile-back"
+                  title={backButtonText}
+                >
                   <StyledIconWrapper onClick={this._backButtonPressed}>
                     <ArrowLeft />
                   </StyledIconWrapper>
-                </div>
+                </button>
               ) : (
                 <AppMenu />
               )}
@@ -122,4 +131,7 @@ const mapDispatchToProps = {
   setMobileScreen: uiActions.setMobileScreen
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(MobileNavigationBar)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(injectIntl(MobileNavigationBar))

percy/percy.test.js

@@ -149,15 +149,15 @@ async function executeTest(page, isMobile, isCallTaker) {
     // Click the clear button next to it
     await page.click('.from-form-control + button')
     if (isMobile) {
-      await page.click('.mobile-location-back')
+      await page.click('.mobile-back')
     }
 
     await page.click('.to-form-control')
     await page.waitForTimeout(300)
     // Click the clear button next to it
     await page.click('.to-form-control + button')
     if (isMobile) {
-      await page.click('.mobile-location-back')
+      await page.click('.mobile-back')
     }
 
     // Fill in new origin