Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

Commit

Permalink
fix(autocomplete): Fix many issues with showing/hiding.
Browse files Browse the repository at this point in the history
The logic behind showing and hiding the autocomplete's
list of suggestions was difficult to understand and was
causing some issues with displaying at the proper times.

Refactor code to use a "show when criteria is met" approach
instead of a "hide when criteria is met" approach and fix
some issues with the md-not-found and suggestions list
appearing when they should not.

Fixes #4665. Fixes #4788. Fixes #4906. Fixes #4855.
Fixes #4618. Fixes #4469. Fixes #4025.

**References:**

Refs #4309, #4678, #4673, #4518, #4503, #4358, #4905.
  • Loading branch information
topherfangio committed Oct 2, 2015
1 parent aaa8909 commit eef1a6f
Show file tree
Hide file tree
Showing 6 changed files with 345 additions and 139 deletions.
48 changes: 31 additions & 17 deletions src/components/autocomplete/autocomplete.scss
Expand Up @@ -16,6 +16,7 @@ $input-error-height: 24px !default;
opacity: 0;
}
}

@keyframes md-autocomplete-list-in {
0% {
opacity: 0;
Expand All @@ -31,6 +32,7 @@ $input-error-height: 24px !default;
height: 40px;
}
}

md-autocomplete {
border-radius: 2px;
display: block;
Expand Down Expand Up @@ -78,26 +80,34 @@ md-autocomplete {
&.md-menu-showing {
z-index: $z-index-backdrop + 1;
}
md-progress-linear .md-mode-indeterminate {
md-progress-linear {
position: absolute;
top: 20px; left: 0; width: 100%;
height: 3px;
transition: none;
bottom: -2px;
left: 0;

.md-container {
transition: none;
.md-mode-indeterminate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
}
&.ng-enter {
transition: opacity 0.15s linear;
&.ng-enter-active {
opacity: 1;
transition: none;

.md-container {
transition: none;
height: 3px;
}
}
&.ng-leave {
transition: opacity 0.15s linear;
&.ng-leave-active {
opacity: 0;
&.ng-enter {
transition: opacity 0.15s linear;
&.ng-enter-active {
opacity: 1;
}
}
&.ng-leave {
transition: opacity 0.15s linear;
&.ng-leave-active {
opacity: 0;
}
}
}
}
Expand Down Expand Up @@ -184,12 +194,12 @@ md-autocomplete {
max-height: 41px * 5.5;
z-index: $z-index-tooltip;
}

.md-autocomplete-suggestions {
margin: 0;
list-style: none;
padding: 0;
li {
cursor: pointer;
font-size: 14px;
overflow: hidden;
padding: 0 15px;
Expand All @@ -203,6 +213,10 @@ md-autocomplete {
&:focus {
outline: none;
}

&:not(.md-not-found-wrapper) {
cursor: pointer;
}
}
}

Expand Down

0 comments on commit eef1a6f

Please sign in to comment.