Merge 85941cc into 2a5b2a4

textkernel · Jul 31, 2019 · ee3b660 · ee3b660
2 parents 2a5b2a4 + 85941cc
commit ee3b660
Show file tree

Hide file tree

Showing 10 changed files with 518 additions and 447 deletions.
diff --git a/src/components/Autosuggest/Autosuggest.js b/src/components/Autosuggest/Autosuggest.js
@@ -30,30 +30,13 @@ class Autosuggest extends React.Component {
             inputValue: '',
             inputValueRecall: '',
             focused: false,
-            originHeight: 'auto',
-            originWidth: 'auto',
         };
 
         this.handleTagDeleteClick = memoize(this.handleTagDeleteClick);
         this.handleWrapperClick = memoize(this.handleWrapperClick);
         this.handleWrapperKeyDown = memoize(this.handleWrapperKeyDown);
     }
 
-    componentDidMount() {
-        this.setRootSize();
-        window.addEventListener('resize', this.setRootSize);
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.setRootSize);
-    }
-
-    setRootSize = () => {
-        if (!this.rootRef.current) return;
-        const { height, width } = this.rootRef.current.getBoundingClientRect();
-        this.setState({ originHeight: height, originWidth: width });
-    };
-
     handleChange = selectedItem => {
         const { onSelectionChange, isMultiselect } = this.props;
 
@@ -126,11 +109,15 @@ class Autosuggest extends React.Component {
     };
 
     handleWrapperClick = openMenu => () => {
-        this.focus(openMenu);
+        const { focused } = this.state;
+        if (!focused) {
+            this.focus(openMenu);
+        }
     };
 
     handleWrapperKeyDown = openMenu => e => {
-        if (e.key === ENTER_KEY) {
+        const { focused } = this.state;
+        if (!focused && e.key === ENTER_KEY) {
             this.focus(openMenu);
         }
     };
@@ -259,21 +246,15 @@ class Autosuggest extends React.Component {
             isProminent,
             ...rest
         } = this.props;
-        const { inputValue, focused, originHeight, originWidth } = this.state;
+        const { inputValue, focused } = this.state;
 
         const stateAndProps = { ...this.props, ...this.state };
         const hideInputPlaceholder = !focused && !!selectedPlaceholder;
         const doShowClearButton =
             showClearButton && !!selectedSuggestions && !!selectedSuggestions.length && !focused;
-        const rootStyle = { position: 'relative' };
-
-        if (focused) {
-            rootStyle.height = originHeight;
-            rootStyle.width = originWidth;
-        }
 
         return (
-            <div ref={this.rootRef} style={rootStyle}>
+            <div {...rest} ref={this.rootRef} {...block(stateAndProps)}>
                 <Downshift
                     onChange={this.handleChange}
                     itemToString={suggestionToString}
@@ -291,17 +272,18 @@ class Autosuggest extends React.Component {
                         highlightedIndex,
                         openMenu,
                     }) => (
-                        <div {...rest} {...block(stateAndProps)}>
+                        <div {...elem('main', stateAndProps)}>
                             <FieldWrapper
                                 clearLabel={clearTitle}
                                 onClear={this.handleClearSelectedSuggestions}
                                 showClearButton={doShowClearButton}
+                                isFocused={focused}
+                                onClick={this.handleWrapperClick(openMenu)}
+                                onKeyDown={this.handleWrapperKeyDown(openMenu)}
                                 {...elem('field', stateAndProps)}
                             >
                                 <div
                                     tabIndex="0"
-                                    onClick={this.handleWrapperClick(openMenu)}
-                                    onKeyDown={this.handleWrapperKeyDown(openMenu)}
                                     role="searchbox"
                                     {...elem('wrapper', stateAndProps)}
                                 >

diff --git a/src/components/Autosuggest/Autosuggest.scss b/src/components/Autosuggest/Autosuggest.scss
@@ -1,33 +1,42 @@
 .Autosuggest {
     position: relative;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
-    background-color: var(--color-background);
-    transition: all var(--transition-duration);
-    border-radius: var(--border-radius);
-
-    &--focused {
-        position: absolute;
-        width: 100%;
-    }
+    min-height: 38px;
 
-    &__field--focused {
-        padding: 0;
-    }
+    &__main {
+        position: relative;
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+        background-color: var(--color-background);
+        transition-property: box-shadow, transform, border-color;
+        transition-duration: var(--transition-duration);
+        border-radius: var(--border-radius);
+        z-index: 10;
+
+        &--focused {
+            position: absolute;
+            width: 100%;
+        }
 
-    &--isProminent {
-        transform-origin: left top;
+        &--isProminent {
+            transform-origin: left top;
 
-        &.Autosuggest--focused {
-            transform: scale(1.1);
-            box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.4);
+            &.Autosuggest__main--focused {
+                transform: scale(1.1);
+                box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.4);
+            }
         }
     }
 
+    &__field--focused {
+        padding: 0;
+    }
+
     &__wrapper {
         cursor: pointer;
         display: flex;
         flex-wrap: wrap;
-        align-items: baseline;
+        align-items: center;
+        min-height: 30px;
+        outline: none;
 
         &--focused {
             padding: var(--spacing-normal);
@@ -49,6 +58,10 @@
         &:focus {
             outline: none;
         }
+
+        &::placeholder {
+            color: var(--color-muted);
+        }
     }
 
     &__list--focused {