use custom time input until facebook/react#3659 is fixed

app/component/CustomInputTime.js

@@ -0,0 +1,30 @@
+import React, { PropTypes } from 'react';
+import { isMobile } from '../util/browser';
+
+export default function CustomInputTime({ changeTime, time }) {
+  let timeInput = null;
+  return (
+    <input
+      type="time"
+      className={`time-selector ${!isMobile ? 'time-selector' : ''}`}
+      value={time}
+      onChange={changeTime}
+      ref={(input) => {
+          // use ref callback to bind change listener so that it works on android/firefox too
+        if (input !== null && timeInput === null) {
+          timeInput = input;
+          const listener = (a) => {
+            changeTime(a); a.target.blur(); a.target.removeEventListener('change', this);
+          };
+          input.addEventListener('change', listener);
+        }
+      }}
+    />
+  );
+}
+
+
+CustomInputTime.propTypes = {
+  changeTime: PropTypes.func.isRequired,
+  time: PropTypes.string.isRequired,
+};

app/component/TimeSelectors.js

@@ -1,12 +1,13 @@
 import React, { PropTypes } from 'react';
 import moment from 'moment';
 import { intlShape } from 'react-intl';
-import cx from 'classnames';
+import { isMobile } from '../util/browser';
 
 import Icon from './Icon';
 import ComponentUsageExample from './ComponentUsageExample';
 import supportsInputType from '../util/supportsInputType';
 import TimeInput from './TimeInput';
+import CustomInputTime from './CustomInputTime';
 
 export default function TimeSelectors(
   { arriveBy, time, dates, setArriveBy, changeTime, changeDate }, { intl },
@@ -41,14 +42,12 @@ export default function TimeSelectors(
         <Icon className="fake-select-arrow" img="icon-icon_arrow-dropdown" />
       </div>
       {supportsInputType('time') ?
-        <div className="select-wrapper">
-          <input
-            type="time"
-            className={cx('time-selector', { desktop: !navigator.userAgent.match(/Mobile/) })}
-            value={time.format('HH:mm')}
-            onChange={changeTime}
+        <div id="time" className="select-wrapper">
+          <CustomInputTime
+            time={time.format('HH:mm')}
+            changeTime={changeTime}
           />
-          {navigator.userAgent.match(/Mobile/) &&
+          {isMobile &&
             <Icon className="fake-select-arrow" img="icon-icon_arrow-dropdown" key="caret" />
           }
         </div> :