fix: be able to handle clicking a geocoded location in IE11

Author: evansiroky

lib/components/form/location-field.js

@@ -19,6 +19,7 @@ import { distanceStringImperial } from '../../util/distance'
 import getGeocoder from '../../util/geocoder'
 import { formatStoredPlaceName } from '../../util/map'
 import { getActiveSearch, getShowUserSettings } from '../../util/state'
+import { isIE } from '../../util/ui'
 
 class LocationField extends Component {
   static propTypes = {
@@ -518,10 +519,27 @@ function createOption (icon, title, onSelect, isActive, isLast) {
     // style={{ borderBottom: '1px solid lightgrey' }}
     key={itemKey++}
     active={isActive}>
-    <div style={{ paddingTop: '5px', paddingBottom: '3px' }}>
-      <div style={{ float: 'left' }}><i className={`fa fa-${icon}`} /></div>
-      <div style={{ marginLeft: '30px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</div>
-    </div>
+    {isIE()
+      // In internet explorer 11, some really weird stuff is happening where it
+      // is not possible to click the text of the title, but if you click just
+      // above it, then it works. So, if using IE 11, just return the title text
+      // and avoid all the extra fancy stuff.
+      // See https://github.com/ibi-group/trimet-mod-otp/issues/237
+      ? title
+      : (
+        <div style={{ paddingTop: '5px', paddingBottom: '3px' }}>
+          <div style={{ float: 'left' }}><i className={`fa fa-${icon}`} /></div>
+          <div style={{
+            marginLeft: '30px',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+          }}>
+            {title}
+          </div>
+        </div>
+      )
+    }
   </MenuItem>
 }
 

lib/util/ui.js

@@ -1,3 +1,5 @@
+import bowser from 'bowser'
+
 import { MainPanelContent } from '../actions/ui'
 import { summarizeQuery } from './query'
 import { getActiveSearch } from './state'
@@ -10,6 +12,13 @@ export function isMobile () {
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
 }
 
+/**
+ * Returns true if the user is using a [redacted] browser
+ */
+export function isIE () {
+  return bowser.name === 'Internet Explorer'
+}
+
 /**
  * Enables scrolling for a specified selector, while disabling scrolling for all
  * other targets. This is adapted from https://stackoverflow.com/a/41601290/915811