Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fix(input): Fix transition when switching tabs in Safari.
Browse files Browse the repository at this point in the history
In Safari, if you select an input, switch tabs, then switch back,
the CSS animation to float the label does not fire properly causing
the label to sit on top on any text that you copy/paste into the
field.

Fix by delaying the `setFocus()` until the next tick.

Fixes #4203.

  Closes #7207
  • Loading branch information
topherfangio authored and ThomasBurleson committed Feb 26, 2016
1 parent 3b76647 commit b944ea1
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 4 deletions.
11 changes: 7 additions & 4 deletions src/components/input/input.js
Original file line number Diff line number Diff line change
Expand Up @@ -297,13 +297,16 @@ function inputTextareaDirective($mdUtil, $window, $mdAria) {
if (!isReadonly) {
element
.on('focus', function(ev) {
containerCtrl.setFocused(true);
$mdUtil.nextTick(function() {
containerCtrl.setFocused(true);
});
})
.on('blur', function(ev) {
containerCtrl.setFocused(false);
inputCheckValue();
$mdUtil.nextTick(function() {
containerCtrl.setFocused(false);
inputCheckValue();
});
});

}

//ngModelCtrl.$setTouched();
Expand Down
9 changes: 9 additions & 0 deletions src/components/input/input.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -134,9 +134,18 @@ describe('md-input-container directive', function() {
expect(el).not.toHaveClass('md-input-focused');

el.find('input').triggerHandler('focus');

// Expect a slight delay (via $mdUtil.nextTick()) which fixes a tabbing issue in Safari, see
// https://github.com/angular/material/issues/4203 for more info.
expect(el).not.toHaveClass('md-input-focused');
$timeout.flush();
expect(el).toHaveClass('md-input-focused');

el.find('input').triggerHandler('blur');

// Again, expect the change to not be immediate
expect(el).toHaveClass('md-input-focused');
$timeout.flush();
expect(el).not.toHaveClass('md-input-focused');
});

Expand Down

0 comments on commit b944ea1

Please sign in to comment.