Skip to content

Commit 5fd2dd5

Browse files
committed
Merged PR 88804: Removed html element comparison based on id
HTML elements are now compared by their JS object instance **instead of** their id. Issue with comparing elements by their id: HTML elements with no id attribute will be compared as equal since id is empty string when id attribute's value is not defined. **How to repro this bug:** 1. Create 2 div elements without id attribute `<div></div> <div/></div>` 2. Get JS reference for them using `let divs = document.querySelectorAll('div');` Note that, `id` of both div elements is same, i.e. `divs[0].id` is "" (empty string) and `divs[1].id` is also "" (empty string) 3. Embed 2 powerbi entities, E.g.: ```javascript let report = powerbi.embed(divs[0], reportConfig); report.on('loaded', () => {console.log('report loaded')}); let dashboard = powerbi.embed(divs[1], dashboardConfig); dashboard.on('loaded', () => {console.log('dashboard loaded')}); ``` 4. Check console, only 'dashboard loaded' string should be logged
1 parent 9a748a4 commit 5fd2dd5

File tree

5 files changed

+64
-3
lines changed

5 files changed

+64
-3
lines changed

dist/powerbi-client.d.ts

+7
Original file line numberDiff line numberDiff line change
@@ -1711,6 +1711,13 @@ declare module "service" {
17111711
* @returns {(Report | Tile)}
17121712
*/
17131713
find(uniqueId: string): embed.Embed;
1714+
/**
1715+
* Removes embed components whose container element is same as the given element
1716+
*
1717+
* @param {Embed} component
1718+
* @param {HTMLElement} element
1719+
* @returns {void}
1720+
*/
17141721
addOrOverwriteEmbed(component: embed.Embed, element: HTMLElement): void;
17151722
/**
17161723
* Given an HTML element that has a component embedded within it, removes the component from the list of embedded components, removes the association between the element and the component, and removes the iframe.

dist/powerbi.js

+8-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/powerbi.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/service.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -453,10 +453,17 @@ export class Service implements IService {
453453
return utils.find(x => x.config.uniqueId === uniqueId, this.embeds);
454454
}
455455

456+
/**
457+
* Removes embed components whose container element is same as the given element
458+
*
459+
* @param {Embed} component
460+
* @param {HTMLElement} element
461+
* @returns {void}
462+
*/
456463
addOrOverwriteEmbed(component: embed.Embed, element: HTMLElement): void {
457464
// remove embeds over the same div element.
458465
this.embeds = this.embeds.filter(function(embed) {
459-
return embed.element.id !== element.id;
466+
return embed.element !== element;
460467
});
461468

462469
this.embeds.push(component);

test/test.spec.ts

+40
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,46 @@ describe('service', function () {
9797
const iframes = document.querySelectorAll('[powerbi-embed-url] iframe');
9898
expect(iframes.length).toEqual(2);
9999
});
100+
101+
it('embeds all components found in the DOM without id attribute', function () {
102+
// Arrange
103+
const elements = [
104+
'<div powerbi-embed-url="https://embedded.powerbi.com/appTokenReportEmbed?reportId=ABC123" powerbi-type="report"></div>',
105+
'<div powerbi-embed-url="https://embedded.powerbi.com/appTokenReportEmbed?reportId=XYZ456" powerbi-type="report"></div>',
106+
];
107+
108+
elements.forEach(element => {
109+
$(element).appendTo('#powerbi-fixture');
110+
});
111+
112+
// Act
113+
powerbi.init();
114+
115+
// Assert
116+
// If embed element has iframe inside it, assume embed action occurred
117+
const iframes = document.querySelectorAll('[powerbi-embed-url] iframe');
118+
expect(iframes.length).toEqual(2);
119+
});
120+
121+
it('embeds all components found in the DOM with duplicate id attribute', function () {
122+
// Arrange
123+
const elements = [
124+
'<div id="reportContainer1" powerbi-embed-url="https://embedded.powerbi.com/appTokenReportEmbed?reportId=ABC123" powerbi-type="report"></div>',
125+
'<div id="reportContainer1" powerbi-embed-url="https://embedded.powerbi.com/appTokenReportEmbed?reportId=XYZ456" powerbi-type="report"></div>',
126+
];
127+
128+
elements.forEach(element => {
129+
$(element).appendTo('#powerbi-fixture');
130+
});
131+
132+
// Act
133+
powerbi.init();
134+
135+
// Assert
136+
// If embed element has iframe inside it, assume embed action occurred
137+
const iframes = document.querySelectorAll('[powerbi-embed-url] iframe');
138+
expect(iframes.length).toEqual(2);
139+
});
100140
});
101141

102142
describe('get', function () {

0 commit comments

Comments
 (0)