fix(location): suppress nearby locations for mobile if current location already set

fixes #97

Author: landonreed

lib/components/form/location-field.js

@@ -239,6 +239,7 @@ class LocationField extends Component {
       label,
       showClearButton,
       static: isStatic,
+      suppressNearby,
       type,
       nearbyStops
     } = this.props
@@ -275,10 +276,12 @@ class LocationField extends Component {
     // Add to the selection handler lookup (for use in _onKeyDown)
     this.locationSelectedLookup[itemIndex] = locationSelected
 
-    // Create and add the option item to the menu items array
-    const currentLocationOption = createOption(optionIcon, optionTitle, locationSelected, itemIndex === activeIndex)
-    menuItems.push(currentLocationOption)
-    itemIndex++
+    if (!suppressNearby) {
+      // Create and add the option item to the menu items array
+      const currentLocationOption = createOption(optionIcon, optionTitle, locationSelected, itemIndex === activeIndex)
+      menuItems.push(currentLocationOption)
+      itemIndex++
+    }
 
     /* 2) Process geocode search result option(s) */
     if (geocodedFeatures.length > 0) {
@@ -309,7 +312,7 @@ class LocationField extends Component {
     }
 
     /* 3) Process nearby transit stop options */
-    if (nearbyStops.length > 0) {
+    if (nearbyStops.length > 0 && !suppressNearby) {
       // Add the menu sub-heading (not a selectable item)
       menuItems.push(<MenuItem header key='ns-header'>Nearby Stops</MenuItem>)
 
@@ -380,6 +383,8 @@ class LocationField extends Component {
     </InputGroup.Addon>
 
     if (isStatic) { // 'static' mode (menu is displayed alongside input)
+    if (isStatic) {
+      // 'static' mode (menu is displayed alongside input, e.g., for mobile view)
       return (
         <div className='location-field static'>
           <form>
@@ -393,12 +398,18 @@ class LocationField extends Component {
               </InputGroup>
             </FormGroup>
           </form>
-          <ul className='dropdown-menu'>
-            {menuItems}
+          <ul className='dropdown-menu' style={{ width: '100%' }}>
+            {menuItems.length > 0 // Show typing prompt to avoid empty screen
+              ? menuItems
+              : <MenuItem header className={'text-center'}>
+                Begin typing to search for locations
+              </MenuItem>
+            }
           </ul>
         </div>
       )
-    } else { // default display mode with dropdown menu
+    } else {
+      // default display mode with dropdown menu
       return (
         <form>
           <FormGroup className='location-field'>