Skip to content
This repository has been archived by the owner on Sep 5, 2024. 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 1, 2015
1 parent 05dd565 commit 18fb700
Show file tree
Hide file tree
Showing 6 changed files with 343 additions and 139 deletions.
48 changes: 31 additions & 17 deletions src/components/autocomplete/autocomplete.scss
Original file line number Diff line number Diff line change
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
Loading

0 comments on commit 18fb700

Please sign in to comment.