Fix autocomplete clear button's position when floating label is used

This closes #539
adopted-ember-addons · Nov 14, 2016 · d3eaa44 · d3eaa44
1 parent 3a102eb
commit d3eaa44
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 50 deletions.
diff --git a/addon/components/paper-autocomplete-trigger.js b/addon/components/paper-autocomplete-trigger.js
@@ -4,6 +4,7 @@ const { Component, isPresent, isBlank, run, get, computed } = Ember;
 
 export default Component.extend({
   tagName: 'md-autocomplete-wrap',
+  classNames: ['md-show-clear-button'],
   classNameBindings: ['noLabel:md-whiteframe-z1', 'select.isOpen:md-menu-showing'],
 
   noLabel: computed.not('extra.label'),

diff --git a/app/styles/backports/paper-autocomplete.scss b/app/styles/backports/paper-autocomplete.scss
@@ -1,36 +1,23 @@
-$autocomplete-option-height: 48px !default;
-
-@keyframes md-autocomplete-list-out {
-  0% {
-    animation-timing-function: linear;
-  }
-  50% {
-    opacity: 0;
-    height: 40px;
-    animation-timing-function: ease-in;
-  }
-  100% {
-    height: 0;
-    opacity: 0;
-  }
+//## Overwrite the AM@1.1.1 styles -- explicit height was removed
+.md-virtual-repeat-container.md-autocomplete-suggestions-container {
+  height: 225.5px;
+  max-height: 225.5px;
 }
 
-@keyframes md-autocomplete-list-in {
-  0% {
-    opacity: 0;
-    height: 0;
-    animation-timing-function: ease-out;
-  }
-  50% {
-    opacity: 0;
-    height: 40px;
-  }
-  100% {
-    opacity: 1;
-    height: 40px;
+// Source: material.angularjs.org/1.1.1
+@mixin rtl-prop($ltr-prop, $rtl-prop, $value, $reset-value) {
+  #{$ltr-prop}: $value;
+  [dir=rtl] & {
+    #{$ltr-prop}: $reset-value;
+    #{$rtl-prop}: $value;
   }
 }
 
+// The default item height is also specified in the JavaScript.
+$md-autocomplete-item-height: 48px !default;
+$md-autocomplete-clear-size: 30px !default;
+$md-autocomplete-input-offset: 20px !default;
+
 md-autocomplete {
   border-radius: 2px;
   display: block;
@@ -48,20 +35,32 @@ md-autocomplete {
     background: transparent;
     height: auto;
 
+
     md-input-container {
-      padding-bottom: 0px;
+      padding-bottom: 0;
     }
     md-autocomplete-wrap {
       height: auto;
     }
-    button {
-      position: absolute;
-      top: auto;
-      bottom: 0;
-      right: 0;
-      width: 30px;
-      height: 30px;
+
+    .md-show-clear-button {
+
+      button {
+        display: block;
+        position: absolute;
+        right: 0;
+
+        top: $md-autocomplete-input-offset;
+        width: $md-autocomplete-clear-size;
+        height: $md-autocomplete-clear-size;
+      }
+
+      input {
+        // Add padding to the end of the input to avoid overlapping with the clear button.
+        @include rtl-prop(padding-right, padding-left, $md-autocomplete-clear-size, 0);
+      }
     }
+
   }
   md-autocomplete-wrap {
 
@@ -79,9 +78,9 @@ md-autocomplete {
 
     md-input-container, input {
       // Layout [flex]
-      flex:1 1 0%;
-      box-sizing:border-box;
-      min-width :0;
+      flex: 1 1 0%;
+      box-sizing: border-box;
+      min-width : 0;
     }
 
     md-progress-linear {
@@ -129,12 +128,12 @@ md-autocomplete {
     line-height: 40px;
     height: 40px;
   }
-  button {
+  .md-show-clear-button button {
     position: relative;
     line-height: 20px;
     text-align: center;
-    width: 30px;
-    height: 30px;
+    width: $md-autocomplete-clear-size;
+    height: $md-autocomplete-clear-size;
     cursor: pointer;
     border: none;
     border-radius: 50%;
@@ -201,25 +200,24 @@ md-autocomplete {
 .md-virtual-repeat-container.md-autocomplete-suggestions-container {
   position: absolute;
   box-shadow: 0 2px 5px rgba(black, 0.25);
-  height: 41px * 5.5;
-  max-height: 41px * 5.5;
   z-index: $z-index-tooltip;
 }
 
 .md-virtual-repeat-container.md-not-found {
-  height: 48px;
+  height: $md-autocomplete-item-height;
 }
 
 .md-autocomplete-suggestions {
   margin: 0;
   list-style: none;
   padding: 0;
+
   li {
     font-size: 14px;
     overflow: hidden;
     padding: 0 15px;
-    line-height: $autocomplete-option-height;
-    height: $autocomplete-option-height;
+    line-height: $md-autocomplete-item-height;
+    height: $md-autocomplete-item-height;
     transition: background 0.15s linear;
     margin: 0;
     white-space: nowrap;

diff --git a/app/styles/ember-paper.scss b/app/styles/ember-paper.scss
@@ -110,7 +110,8 @@
 @import './angular-material/components/subheader/subheader';
 @import './angular-material/components/subheader/subheader-theme';
 
-@import './angular-material/components/autocomplete/autocomplete';
+// Overwriting below with the latest style
+// @import './angular-material/components/autocomplete/autocomplete';
 @import './angular-material/components/autocomplete/autocomplete-theme';
 
 @import './angular-material/components/progressLinear/progress-linear';

diff --git a/tests/dummy/app/templates/demo/autocomplete.hbs b/tests/dummy/app/templates/demo/autocomplete.hbs
@@ -104,6 +104,7 @@
           searchField="name"
           labelPath="name"
           label="Select a Country..."
+          allowClear=(readonly allowClearWithLabel)
           loadingMessage="Searching countries..."
           noMatchesMessage="Oops this country doesn't exist."
           onSelectionChange=(action (mut selectedCountry2)) as |country select|}}
@@ -122,15 +123,20 @@
       {{/if}}
     </p>
     {{#paper-checkbox
-      value=disabled2
+      value=(readonly disabled2)
       onChange=(action (mut disabled2))}}
       Disable input
     {{/paper-checkbox}}
     {{#paper-checkbox
-      value=simulateQuery2
+      value=(readonly simulateQuery2)
       onChange=(action (mut simulateQuery2))}}
       Simulate query
     {{/paper-checkbox}}
+    {{#paper-checkbox
+      value=(readonly allowClearWithLabel)
+      onChange=(action (mut allowClearWithLabel))}}
+      Allow Clear
+    {{/paper-checkbox}}
 
     <h3>Template</h3>
     {{code-snippet name="autocomplete.floating-label.hbs"}}