Only focus on the dropdown button in material dropdown select when the focus lands on the overlay placeholder focus elements.

Because in triggersOutsideAny we listen to mouseup instead of mousedown, a focus event is actually dispatched before a mouse event during auto dismiss. This causes the dropdown button in material dropdown select to be focused even after user clicks on a focusable element.

Added a constants file in overlay to expose the focusable placeholder class name and some other hardcoded variables. Will reference this file everywhere else in a follow up cl.

PiperOrigin-RevId: 199403947

Author: cissyshi

lib/laminate/overlay/constants.dart

@@ -0,0 +1,9 @@
+// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+const overlayDefaultContainerId = 'default-acx-overlay-container';
+const overlayContainerClassName = 'acx-overlay-container';
+const overlayContainerNameAttribute = 'container-name';
+const overlayFocusablePlaceholderClassName =
+    'acx-overlay-focusable-placeholder';

lib/laminate/overlay/module.dart

@@ -5,6 +5,7 @@
 import 'dart:html';
 
 import 'package:angular/angular.dart';
+import 'package:angular_components/laminate/overlay/constants.dart';
 import 'package:angular_components/src/laminate/overlay/overlay_service.dart';
 import 'package:angular_components/src/laminate/overlay/render/overlay_dom_render_service.dart';
 import 'package:angular_components/src/laminate/overlay/render/overlay_style_config.dart';
@@ -31,23 +32,27 @@ HtmlElement getDefaultContainer(
     @Optional() @SkipSelf() @Inject(overlayContainerToken) container) {
   if (container != null) return container;
 
-  var element = parent.querySelector('#default-acx-overlay-container');
+  var element = parent.querySelector('#$overlayDefaultContainerId');
   if (element == null) {
     // Add a hidden focusable element before overlay container to prevent screen
     // reader from picking up content from a random element when users shift tab
     // out of the first visible overlay.
-    parent.append(new DivElement()..tabIndex = 0);
+    parent.append(new DivElement()
+      ..tabIndex = 0
+      ..classes.add(overlayFocusablePlaceholderClassName));
 
     element = new DivElement()
-      ..id = 'default-acx-overlay-container'
-      ..classes.add('acx-overlay-container');
+      ..id = overlayDefaultContainerId
+      ..classes.add(overlayContainerClassName);
     parent.append(element);
 
     // Add a hidden focusable element after overlay container to ensure there's
     // a focusable element when users tab out of the last visible overlay.
-    parent.append(new DivElement()..tabIndex = 0);
+    parent.append(new DivElement()
+      ..tabIndex = 0
+      ..classes.add(overlayFocusablePlaceholderClassName));
   }
-  element.attributes['container-name'] = name;
+  element.attributes[overlayContainerNameAttribute] = name;
   return element;
 }
 

lib/material_select/material_dropdown_select.dart

@@ -13,6 +13,7 @@ import 'package:angular_components/dynamic_component/dynamic_component.dart';
 import 'package:angular_components/focus/keyboard_only_focus_indicator.dart';
 import 'package:angular_components/interfaces/has_disabled.dart';
 import 'package:angular_components/laminate/enums/alignment.dart';
+import 'package:angular_components/laminate/overlay/constants.dart';
 import 'package:angular_components/laminate/popup/popup.dart';
 import 'package:angular_components/material_list/material_list.dart';
 import 'package:angular_components/material_popup/material_popup.dart';
@@ -474,8 +475,14 @@ class MaterialDropdownSelectComponent extends MaterialSelectBase
   }
 
   void onAutoDismissed(Event event) {
-    if (event is FocusEvent) {
-      dropdownButton.focus();
+    if (event is FocusEvent &&
+        event.target is Element &&
+        (event.target as Element)
+            .classes
+            .contains(overlayFocusablePlaceholderClassName)) {
+      scheduleMicrotask(() {
+        dropdownButton.focus();
+      });
     }
   }