Prevent mobile view change on location clear

lib/actions/form.js

@@ -157,6 +157,8 @@ export function checkShouldReplanTrip(autoPlan, isMobile, oldQuery, newQuery) {
     (fromChanged && !toChanged) || (!fromChanged && toChanged)
   // Check whether a trip should be auto-replanned
   const strategy = (isMobile && autoPlan?.mobile) || autoPlan?.default
+  const locationChangedToBlank =
+    (oldQuery.from && !newQuery.from) || (oldQuery.to && !newQuery.to)
   const shouldReplanTrip =
     evaluateAutoPlanStrategy(
       strategy,
@@ -170,6 +172,7 @@ export function checkShouldReplanTrip(autoPlan, isMobile, oldQuery, newQuery) {
     (oldQuery.from || oldQuery.to)
   return {
     fromChanged,
+    locationChangedToBlank,
     oneLocationChanged,
     shouldReplanTrip,
     toChanged
@@ -203,8 +206,13 @@ export function formChanged(oldQuery, newQuery) {
     const { config, ui } = state.otp
     const { autoPlan, debouncePlanTimeMs } = config
     const isMobile = coreUtils.ui.isMobile()
-    const { fromChanged, oneLocationChanged, shouldReplanTrip, toChanged } =
-      checkShouldReplanTrip(autoPlan, isMobile, oldQuery, newQuery)
+    const {
+      fromChanged,
+      locationChangedToBlank,
+      oneLocationChanged,
+      shouldReplanTrip,
+      toChanged
+    } = checkShouldReplanTrip(autoPlan, isMobile, oldQuery, newQuery)
 
     dispatch(updateQueryTimeIfLeavingNow())
 
@@ -222,7 +230,10 @@ export function formChanged(oldQuery, newQuery) {
         // Return to search screen on mobile only if not currently on welcome
         // screen (otherwise when the current position is auto-set the screen
         // will change unexpectedly).
-        if (ui.mobileScreen !== MobileScreens.WELCOME_SCREEN) {
+        if (
+          ui.mobileScreen !== MobileScreens.WELCOME_SCREEN &&
+          !locationChangedToBlank
+        ) {
           dispatch(setMobileScreen(MobileScreens.SEARCH_FORM))
         }
       }

lib/components/mobile/location-search.js

@@ -46,6 +46,7 @@ class MobileLocationSearch extends Component {
       this.props
     const suppressNearby =
       otherLocation && otherLocation.category === 'CURRENT_LOCATION'
+
     return (
       <MobileContainer>
         <MobileNavigationBar
@@ -59,6 +60,7 @@ class MobileLocationSearch extends Component {
                   id: 'components.LocationSearch.setOrigin'
                 })
           }
+          showBackButton
         />
         <main tabIndex={-1}>
           <div className="location-search mobile-padding">

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

@@ -148,11 +148,17 @@ async function executeTest(page, isMobile, isCallTaker) {
     await page.waitForTimeout(300)
     // Click the clear button next to it
     await page.click('.from-form-control + button')
+    if (isMobile) {
+      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-back')
+    }
 
     // Fill in new origin
     await page.hover('.from-form-control')