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. Closes #4958.

**References:**

Refs #4309, Refs #4678, Refs #4673, Refs #4518, Refs #4503, Refs #4358, Refs #4905.
  • Loading branch information
topherfangio authored and ThomasBurleson committed Oct 6, 2015
1 parent 82160e1 commit 7429700
Show file tree
Hide file tree
Showing 6 changed files with 336 additions and 142 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 7429700

Please sign in to comment.