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

Commit 9ace8ec

Browse files
devversionThomasBurleson
authored andcommitted
fix(dialog): prevent duplicate ids for md-dialog and md-dialog-content
Fixes #6339, Closes #6717.
1 parent 19966a3 commit 9ace8ec

File tree

4 files changed

+73
-15
lines changed

4 files changed

+73
-15
lines changed

src/components/dialog/demoBasicUsage/index.html

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,29 @@
44
send focus back to the triggering button.
55
</p>
66

7-
<div class="dialog-demo-content" layout="row" layout-wrap layout-margin>
8-
<md-button class="md-primary md-raised" ng-click="showAlert($event)" flex="100" flex-gt-md="auto">
7+
<div class="dialog-demo-content" layout="row" layout-wrap layout-margin layout-align="center">
8+
<md-button class="md-primary md-raised" ng-click="showAlert($event)" >
99
Alert Dialog
1010
</md-button>
11-
<md-button class="md-primary md-raised" ng-click="showConfirm($event)" flex="100" flex-gt-md="auto">
11+
<md-button class="md-primary md-raised" ng-click="showConfirm($event)" >
1212
Confirm Dialog
1313
</md-button>
14-
<md-button class="md-primary md-raised" ng-click="showPrompt($event)" flex="100" flex-gt-md="auto">
14+
<md-button class="md-primary md-raised" ng-click="showPrompt($event)" >
1515
Prompt Dialog
1616
</md-button>
17-
<md-button class="md-primary md-raised" ng-click="showAdvanced($event)" flex="100" flex-gt-md="auto">
17+
<md-button class="md-primary md-raised" ng-click="showAdvanced($event)">
1818
Custom Dialog
1919
</md-button>
20-
<div hide-gt-sm layout="row" layout-align="center center" flex="100">
21-
<md-checkbox ng-model="customFullscreen" aria-label="Fullscreen Custom Dialog">Custom Dialog Fullscreen</md-checkbox>
22-
</div>
23-
<md-button class="md-primary md-raised" ng-click="showTabDialog($event)" flex="100" flex-gt-md="auto">
20+
<md-button class="md-primary md-raised" ng-click="showTabDialog($event)" >
2421
Tab Dialog
2522
</md-button>
2623
</div>
2724
<p class="footer">Note: The <b>Confirm</b> dialog does not use <code>$mdDialog.clickOutsideToClose(true)</code>.</p>
25+
<div hide-gt-sm layout="row" layout-align="center center" flex>
26+
<md-checkbox ng-model="customFullscreen" aria-label="Fullscreen Custom Dialog">Force Custom Dialog Fullscreen</md-checkbox>
27+
</div>
2828

29-
<div ng-if="status">
30-
<br/>
29+
<div ng-if="status" id="status">
3130
<b layout="row" layout-align="center center" class="md-padding">
3231
{{status}}
3332
</b>

src/components/dialog/demoBasicUsage/style.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,10 @@
1212
margin-top:50px;
1313
}
1414

15+
button {
16+
width: 200px;
17+
}
18+
19+
div#status {
20+
color: #c60008;
21+
}

src/components/dialog/dialog.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,13 @@ angular
2323
* Inside, use an `<md-dialog-content>` element for the dialog's content, and use
2424
* an `<md-dialog-actions>` element for the dialog's actions.
2525
*
26-
* * ## CSS
26+
* ## CSS
2727
* - `.md-dialog-content` - class that sets the padding on the content as the spec file
2828
*
29+
* ## Notes
30+
* - If you specify an `id` for the `<md-dialog>`, the `<md-dialog-content>` will have the same `id`
31+
* prefixed with `dialogContent_`.
32+
*
2933
* @usage
3034
* ### Dialog template
3135
* <hljs lang="html">
@@ -887,7 +891,7 @@ function MdDialogProvider($$interimElementProvider) {
887891

888892
var role = (options.$type === 'alert') ? 'alertdialog' : 'dialog';
889893
var dialogContent = element.find('md-dialog-content');
890-
var dialogId = element.attr('id') || ('dialog_' + $mdUtil.nextUid());
894+
var dialogContentId = ('dialogContent_' + element.attr('id')) || ('dialogContent_' + $mdUtil.nextUid());
891895

892896
element.attr({
893897
'role': role,
@@ -898,8 +902,8 @@ function MdDialogProvider($$interimElementProvider) {
898902
dialogContent = element;
899903
}
900904

901-
dialogContent.attr('id', dialogId);
902-
element.attr('aria-describedby', dialogId);
905+
dialogContent.attr('id', dialogContentId);
906+
element.attr('aria-describedby', dialogContentId);
903907

904908
if (options.ariaLabel) {
905909
$mdAria.expect(element, 'aria-label', options.ariaLabel);

src/components/dialog/dialog.spec.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,54 @@ describe('$mdDialog', function() {
137137
expect($document.activeElement).toBe(parent[0].querySelector('md-dialog-content'));
138138
}));
139139

140+
it('should use the prefixed id from `md-dialog` for `md-dialog-content`', inject(function ($mdDialog, $rootScope, $document) {
141+
jasmine.mockElementFocus(this);
142+
143+
var parent = angular.element('<div>');
144+
145+
$mdDialog.show(
146+
$mdDialog.alert({
147+
template: '<md-dialog id="demoid">' +
148+
'<md-dialog-content>' +
149+
'<p>Muppets are the best</p>' +
150+
'</md-dialog-content>' +
151+
'</md-dialog>',
152+
parent: parent
153+
})
154+
);
155+
156+
runAnimation();
157+
158+
var dialog = parent.find('md-dialog');
159+
var content = parent[0].querySelector('md-dialog-content');
160+
161+
expect(content.id).toBe('dialogContent_' + dialog[0].id);
162+
}));
163+
164+
it('should apply a prefixed id for `md-dialog-content`', inject(function ($mdDialog, $rootScope, $document) {
165+
jasmine.mockElementFocus(this);
166+
167+
var parent = angular.element('<div>');
168+
169+
$mdDialog.show(
170+
$mdDialog.alert({
171+
template: '<md-dialog>' +
172+
'<md-dialog-content>' +
173+
'<p>Muppets are the best</p>' +
174+
'</md-dialog-content>' +
175+
'</md-dialog>',
176+
parent: parent
177+
})
178+
);
179+
180+
runAnimation();
181+
182+
var dialog = parent.find('md-dialog');
183+
var content = parent[0].querySelector('md-dialog-content');
184+
185+
expect(content.id).toMatch(/dialogContent_.*/g);
186+
}));
187+
140188
it('should remove `md-dialog-container` on mousedown mouseup and remove', inject(function($mdDialog, $rootScope, $timeout) {
141189
jasmine.mockElementFocus(this);
142190
var container, parent = angular.element('<div>');

0 commit comments

Comments
 (0)