Merge pull request #241 from Bandwidth/select-fixes2

Select component fixes
Bandwidth · Dec 10, 2018 · 75e92d8 · 75e92d8
2 parents 3643fe6 + 03a2a1d
commit 75e92d8
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 419 deletions.
diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js
@@ -127,6 +127,10 @@ class Input extends React.PureComponent {
      * change the focus state of the element)
      */
     appearFocused: PropTypes.bool,
+    /**
+     * Hides the cursor from view
+     */
+    hideCursor: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -154,6 +158,7 @@ class Input extends React.PureComponent {
     autoComplete: true,
     spellCheck: 'false',
     appearFocused: false,
+    hideCursor: false,
   };
 
   static styles = styles;

diff --git a/src/components/Input/styles/InputStyles.js b/src/components/Input/styles/InputStyles.js
@@ -12,7 +12,10 @@ const InputStyles = styled.input`
   border-style: solid;
   text-align: left;
 
-  color: ${get('colors.text.default')};
+  color: ${({ hideCursor }) =>
+    hideCursor ? 'transparent' : 'var(--colors-text-default)'};
+  text-shadow: ${({ hideCursor }) =>
+    hideCursor ? '0 0 0 var(--colors-text-default)' : 'none'};
   background: ${get('colors.background.default')};
   opacity: 1;
   border-color: ${props =>

diff --git a/src/components/Select/SearchableSelect.js b/src/components/Select/SearchableSelect.js
@@ -38,25 +38,30 @@ export default class SearchableSelect extends React.Component {
   };
 
   handleSelectStateChange = (changes, downshiftState) => {
-    const { filterOptions, options, onStateChange } = this.props;
+    const { options, onStateChange } = this.props;
 
-    if (changes.hasOwnProperty('isOpen') && changes.isOpen) {
+    if (
+      changes.hasOwnProperty('isOpen') &&
+      changes.isOpen &&
+      !changes.inputValue
+    ) {
       this.setState({
         inputValue: changes.selectedItem || '',
         filteredOptions: options,
       });
     }
 
-    if (changes.hasOwnProperty('inputValue')) {
-      this.setState({
-        inputValue: changes.inputValue,
-        filteredOptions: filterOptions(options, changes.inputValue, this.props),
-      });
-    }
-
     onStateChange && onStateChange(changes, downshiftState);
   };
 
+  handleInputValueChange = (inputValue, downshiftState) => {
+    const { filterOptions, options } = this.props;
+    this.setState({
+      inputValue: inputValue,
+      filteredOptions: filterOptions(options, inputValue, this.props),
+    });
+  };
+
   render() {
     const { options, onStateChange, CurrentValue, ...rest } = this.props;
 
@@ -65,6 +70,7 @@ export default class SearchableSelect extends React.Component {
         {...rest}
         CurrentValue={CurrentValue}
         onStateChange={this.handleSelectStateChange}
+        onInputValueChange={this.handleInputValueChange}
         options={this.state.filteredOptions}
         inputValue={this.state.inputValue}
       />

diff --git a/src/components/Select/styles/Controls.js b/src/components/Select/styles/Controls.js
@@ -4,6 +4,9 @@ import { themeGet } from 'extensions';
 export default styled.div`
   display: flex;
   flex-direction: row;
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+  color: ${({ disabled }) =>
+    disabled ? 'var(--colors-text-disabled)' : 'auto'};
 
   & > *:not(:last-child) {
     margin-right: ${themeGet('spacing.small')};

diff --git a/src/components/Select/styles/CurrentValue.js b/src/components/Select/styles/CurrentValue.js
@@ -25,6 +25,10 @@ const DefaultWrapper = styled.div`
   }
 `;
 
+const StyledInput = styled(DefaultInput)`
+  cursor: ${({ disabled }) => (disabled ? 'text' : 'pointer')};
+`;
+
 const Unsearchable = forwardRef(
   (
     {
@@ -65,14 +69,16 @@ const Unsearchable = forwardRef(
           disabled={disabled}
           required={required}
           invalid={invalid}
-          value={inputValue || placeholder}
+          placeholder={placeholder}
+          value={inputValue}
+          hideCursor
           {...rest}
         />
-        <Controls>
+        <Controls disabled={disabled}>
           {!!inputValue &&
             !disabled &&
             !required && <ClearButton onClick={clearSelection} />}
-          <Arrow expanded={isOpen} />
+          <Arrow disabled={disabled} expanded={isOpen} />
         </Controls>
       </Wrapper>
     );
@@ -81,7 +87,7 @@ const Unsearchable = forwardRef(
 
 Unsearchable.defaultProps = {
   Wrapper: DefaultWrapper,
-  Input: DefaultInput,
+  Input: StyledInput,
   Controls: DefaultControls,
   Arrow: DefaultArrow,
   ClearButton: DefaultClearButton,
@@ -90,7 +96,7 @@ Unsearchable.defaultProps = {
 
 Unsearchable.styles = {
   Wrapper: DefaultWrapper,
-  Input: DefaultInput,
+  Input: StyledInput,
   Controls: DefaultControls,
   Arrow: DefaultArrow,
   ClearButton: DefaultClearButton,

diff --git a/src/components/Select/styles/LoadingState.js b/src/components/Select/styles/LoadingState.js
@@ -16,16 +16,12 @@ const Overlay = styled(Loader)`
   transform: translate(-50%, -50%);
 `;
 
-const FadedArrow = styled(Arrow)`
-  opacity: 0.5;
-`;
-
 export default props => (
   <FakeInput
     {...props}
     inlineContent={
-      <Controls>
-        <FadedArrow />
+      <Controls disabled>
+        <Arrow />
       </Controls>
     }
   >

diff --git a/src/components/Select/styles/Options.js b/src/components/Select/styles/Options.js
@@ -33,7 +33,7 @@ const Options = forwardRef(
         >
           <OptionsList>
             <Option>
-              <HelpText>No items</HelpText>
+              <HelpText style={{ margin: 0 }}>No items</HelpText>
             </Option>
           </OptionsList>
         </OptionsListContainer>

diff --git a/src/components/Select/styles/SearchableCurrentValue.js b/src/components/Select/styles/SearchableCurrentValue.js
@@ -35,6 +35,7 @@ const Searchable = forwardRef(
 
     return (
       <Input
+        visited={false}
         {...getInputProps({
           inputRef: ref,
           appearFocused: isOpen,
@@ -43,15 +44,17 @@ const Searchable = forwardRef(
           required,
           invalid,
           onFocus: openMenu,
+          onClick: openMenu,
           value: inputValue,
         })}
         {...rest}
         inlineContent={
-          <Controls>
+          <Controls disabled={disabled}>
             {!!inputValue &&
               !disabled &&
               !required && <ClearButton onClick={clearSelection} />}
             <Arrow
+              disabled={disabled}
               {...getToggleButtonProps({
                 expanded: isOpen,
                 onClick: () => setState({ inputValue: '' }),