fix(autocomplete): dividers in list throwing off keyboard navigation (#13224)

crisbeto · vivian-hu-zz · commit 0886cef8e90e · 2018-10-02T10:36:37.000-07:00
Since we count on the options being a particular height, having 1px dividers between them ends up throwing off the keyboard navigation. These changes add an offset to the dividers to avoid the issue. Fixes #13200.
diff --git a/src/lib/autocomplete/autocomplete.scss b/src/lib/autocomplete/autocomplete.scss
@@ -32,6 +32,12 @@ $mat-autocomplete-panel-border-radius: 4px !default;
     border-top-right-radius: $mat-autocomplete-panel-border-radius;
   }
 
+  // We need to offset horizontal dividers by their height, because
+  // they throw off the keyboard navigation inside the panel.
+  .mat-divider-horizontal {
+    margin-top: -1px;
+  }
+
   @include cdk-high-contrast {
     outline: solid 1px;
   }

Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,12 @@ $mat-autocomplete-panel-border-radius: 4px !default;`
`32`	`32`	`border-top-right-radius: $mat-autocomplete-panel-border-radius;`
`33`	`33`	`}`
`34`	`34`
	`35`	`+ // We need to offset horizontal dividers by their height, because`
	`36`	`+ // they throw off the keyboard navigation inside the panel.`
	`37`	`+ .mat-divider-horizontal {`
	`38`	`+ margin-top: -1px;`
	`39`	`+ }`
	`40`	`+`
`35`	`41`	`@include cdk-high-contrast {`
`36`	`42`	`outline: solid 1px;`
`37`	`43`	`}`