Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP


[widget-modality] Focus after a timeout #1517

wants to merge 2 commits into from

4 participants


When showing a hidden Panel, WidgetModality calls _focus but this happens before WidgetPositionAlign repositioned the panel. This causes the widget to be focused in an incorrect position (sometimes at the top of the page) and forces the page to scroll in certain situations.

This is definitely a patch. It makes sense that WidgetModality waits until a next turn to call focus because other mixins/components may be doing a lot of things to the position a styles of the widget using Modality, but on the other hand it's hard to test and looks hacky. I'm looking for a better solution and feedback.


If you launch two stacked modals, there's a race, no? Does the WidgetModality code correctly deal with that race?


Very good point. The race is something that can be fixed. Do you agree with using a timer in the first place?


I'm not sure. Is the root of the issue that both WidgetModality and WidgetPositionAlign subscribe to this.after('visibleChange', ...), but modality (always or sometimes) wins?

Throwing in a setTimeout always seems like a hack to me. But if the issue is priority ordering of feature callbacks, then a hack will probably have to do because that's a systemic problem without an easy fix.


This would solve also #1468 I suppose?


Yes, it will. I just need to figure out Luke's point about the race between multiple modals.


I have experienced similar issues with focus conflicts between WidgetButton and WidgetModality, which I addressed in #1424 by switching the order they are loaded. I needed to make sure the trigger element that launches a panel would have focus returned when the panel is dismissed. There might be some overlap here...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 23, 2013
  1. @juandopazo

    [widget-modality] Focus after a timeout when showing

    juandopazo authored avoid positioning issues
  2. @juandopazo
This page is out of date. Refresh to see the latest.
3  src/widget-modality/
@@ -4,7 +4,8 @@ Widget Modality Change History
-* No changes.
+* Focus after a timeout to avoid the browser being scrolled after visibility
18 src/widget-modality/js/Widget-Modality.js
@@ -195,6 +195,16 @@ var WIDGET = 'widget',
_uiHandlesModal: null,
+ /**
+ A reference to the scheduling of a focus operation. Used to cancel
+ the focusing action on visibility changes.
+ @property _wmFocusing
+ @type Object
+ @private
+ **/
+ _wmFocusing: null,
* Adds modal class to the bounding box of the widget
@@ -332,7 +342,9 @@ var WIDGET = 'widget',
if (isModal) {;
Y.later(1, this, '_attachUIHandlesModal');
- this._focus();
+ // Focus after a timeout to allow other components to modify
+ // the position and other CSS styles of the widget
+ this._wmFocusing = Y.later(1, this, '_focus');
@@ -344,6 +356,10 @@ var WIDGET = 'widget',
stack.splice(index, 1);
+ if (this._wmFocusing) {
+ this._wmFocusing.cancel();
+ }
Something went wrong with that request. Please try again.