Merge pull request #1661 from coralproject/dropdown-ios

Use <button> for dropdown to fix IOS bug

client/coral-framework/styles/reset.css

@@ -6,6 +6,7 @@
   border: none;
   touch-action: manipulation;
   padding: 0;
+  margin: 0;
 
   overflow: hidden;
 

client/coral-ui/components/BareButton.js

@@ -7,17 +7,26 @@ import cn from 'classnames';
  *  BareButton is a button whose styling is stripped off to a minimum.
  *  Can pass anchor=true to use `a` instead of `button`
  */
-const BareButton = ({ anchor, className, ...props }) => {
-  let Element = 'button';
-  if (anchor) {
-    Element = 'a';
+export default class BareButton extends React.Component {
+  ref = null;
+
+  handleRef = ref => (this.ref = ref);
+  focus = () => this.ref.focus();
+
+  render() {
+    const { anchor, className, ...props } = this.props;
+    const Element = anchor ? 'a' : 'button';
+    return (
+      <Element
+        {...props}
+        className={cn(styles.bare, className)}
+        ref={this.handleRef}
+      />
+    );
   }
-  return <Element {...props} className={cn(styles.bare, className)} />;
-};
+}
 
 BareButton.propTypes = {
   className: PropTypes.string,
   anchor: PropTypes.bool,
 };
-
-export default BareButton;

client/coral-ui/components/Dropdown.css

@@ -1,32 +1,26 @@
 .dropdown {
   position: relative;
-  height: 34px;
-  background: #2c2c2c;
-  box-sizing: border-box;
-  color: white;
-  border-radius: 3px;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-  line-height: 20px;
-
-  font-size: 0.98em;
-  border-radius: 3px;
-  cursor: pointer;
-
-  &.disabled {
-    color: #e5e5e5;
-    background: #888;
-    cursor: default;
-    pointer-events: none;
-  }
 }
 
 .toggle {
   padding: 8px 45px 8px 15px;
   outline: none;
+  color: white;
+  background: #2c2c2c;
+  border-radius: 3px;
+  height: 34px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+  line-height: 20px;
+  font-size: 0.98em;
 
   &:focus {
     background: #888;
   }
+
+  &:disabled {
+    color: #e5e5e5;
+    background: #888;
+  }
 }
 
 .toggleOpen {

client/coral-ui/components/Dropdown.js

@@ -4,6 +4,7 @@ import styles from './Dropdown.css';
 import Icon from './Icon';
 import cn from 'classnames';
 import ClickOutside from 'coral-framework/components/ClickOutside';
+import { BareButton } from 'coral-ui';
 
 class Dropdown extends React.Component {
   toggleRef = null;
@@ -88,16 +89,6 @@ class Dropdown extends React.Component {
     this.toggle();
   };
 
-  handleKeyDown = e => {
-    const code = e.which;
-
-    // 13 = Return, 32 = Space
-    if (code === 13 || code === 32) {
-      e.preventDefault();
-      this.toggle();
-    }
-  };
-
   hideMenu = () => {
     this.setState({
       isOpen: false,
@@ -155,23 +146,18 @@ class Dropdown extends React.Component {
             styles.dropdown,
             className,
             containerClassName,
-            'dd dd-container',
-            {
-              [styles.disabled]: disabled,
-            }
+            'dd dd-container'
           )}
         >
-          <div
+          <BareButton
             className={cn(styles.toggle, toggleClassName, {
               [cn(this.state.isOpen, toggleOpenClassName)]: this.state.isOpen,
             })}
             onClick={this.handleClick}
-            onKeyDown={this.handleKeyDown}
-            role="button"
             aria-pressed={this.state.isOpen}
             aria-haspopup="true"
-            tabIndex={disabled ? '-1' : '0'}
             ref={this.handleToggleRef}
+            disabled={disabled}
           >
             {this.props.icon && (
               <Icon
@@ -194,7 +180,7 @@ class Dropdown extends React.Component {
                 aria-hidden="true"
               />
             )}
-          </div>
+          </BareButton>
           {this.state.isOpen && (
             <div>
               <div tabIndex="0" onFocus={this.trapFocusBegin} />

client/coral-ui/components/Option.css

@@ -1,7 +1,9 @@
 .option {
+  width: 100%;
   padding: 10px;
   outline: none;
   white-space: nowrap;
+  text-align: left;
 
   &:focus, &:hover {
     background-color: #ccc;

client/coral-ui/components/Option.js

@@ -1,13 +1,15 @@
 import React from 'react';
+import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import styles from './Option.css';
 import cn from 'classnames';
+import { BareButton } from 'coral-ui';
 
 class Option extends React.Component {
   ref = null;
 
   handleRef = ref => {
-    this.ref = ref;
+    this.ref = findDOMNode(ref);
   };
 
   focus = () => {
@@ -19,16 +21,17 @@ class Option extends React.Component {
     const { className, label = '', onClick, onKeyDown } = this.props;
     const id = this.props.id ? this.props.id : this.props.value;
     return (
-      <li
-        className={cn(styles.option, className, 'dd-option')}
-        onClick={onClick}
-        onKeyDown={onKeyDown}
-        role="option"
-        tabIndex="0"
-        ref={this.handleRef}
-        id={id}
-      >
-        {label}
+      <li>
+        <BareButton
+          className={cn(styles.option, className, 'dd-option')}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+          role="option"
+          ref={this.handleRef}
+          id={id}
+        >
+          {label}
+        </BareButton>
       </li>
     );
   }