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

Commit 0388a4e

Browse files
vikas-cldcvrvikas-cldcvr
authored
FLOW-1030 scope query selector fix (#211)
1 parent a9d5673 commit 0388a4e

File tree

4 files changed

+71
-24
lines changed

4 files changed

+71
-24
lines changed

‎packages/flow-table/CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22

33
# Change Log
44

5+
## [2.2.3] - 2023-12-14
6+
7+
### Bug Fixes
8+
9+
- `:scope > ` querySelector not working in some browser
10+
511
## [2.2.2] - 2023-12-13
612

713
### Bug Fixes

‎packages/flow-table/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@cldcvr/flow-table",
3-
"version": "2.2.2",
3+
"version": "2.2.3",
44
"description": "Table component for flow library",
55
"module": "dist/flow-table.es.js",
66
"main": "dist/flow-table.cjs.js",

‎packages/flow-table/src/components/f-table/f-table.ts

+51-18
Original file line numberDiff line numberDiff line change
@@ -75,22 +75,32 @@ export class FTable extends FRoot {
7575
await this.updateHeaderSelectionCheckboxState();
7676
}
7777
if (this.selectable === "single") {
78-
const headerRow = this.querySelector<FTrow>(":scope > f-trow[selected][slot='header']");
78+
const headerRow = Array.from(this.children).filter(
79+
el =>
80+
el.tagName.toLocaleLowerCase() === "f-trow" &&
81+
el.getAttribute("slot") === "header" &&
82+
el.hasAttribute("selected")
83+
)[0] as FTrow;
7984
if (headerRow) {
8085
headerRow.selected = false;
8186
}
8287

83-
const selectedRow = this.querySelector<FTrow>(
84-
":scope > f-trow[selected]:not([slot='header'])"
85-
);
88+
const selectedRow = Array.from(this.children).filter(
89+
el =>
90+
el.tagName.toLocaleLowerCase() === "f-trow" &&
91+
el.getAttribute("slot") !== "header" &&
92+
el.hasAttribute("selected")
93+
)[0] as FTrow;
8694
if (selectedRow) {
8795
this.updateRadioChecks(selectedRow);
8896
}
8997
}
9098
}
9199

92100
updateGridTemplateColumns() {
93-
const firstRow = this.querySelector(":scope > f-trow");
101+
const firstRow = Array.from(this.children).filter(
102+
el => el.tagName.toLocaleLowerCase() === "f-trow"
103+
)[0] as FTrow;
94104
if (firstRow !== null) {
95105
/**
96106
* following query is not working vue app so replaced with firstRow.children
@@ -116,7 +126,9 @@ export class FTable extends FRoot {
116126
* apply checkbox or radio based on selection property
117127
*/
118128
applySelectable() {
119-
const allRows = this.querySelectorAll<FTrow>(":scope > f-trow");
129+
const allRows = Array.from(this.children).filter(
130+
el => el.tagName.toLocaleLowerCase() === "f-trow"
131+
) as FTrow[];
120132
allRows.forEach(row => {
121133
const firstChild = Array.from(row.children).find(child => {
122134
return child.tagName === "F-TCELL";
@@ -134,7 +146,9 @@ export class FTable extends FRoot {
134146
async handleHeaderRowSelection(event: CustomEvent) {
135147
event.stopPropagation();
136148
if (this.selectable === "multiple") {
137-
const allRows = this.querySelectorAll<FTrow>(":scope > f-trow");
149+
const allRows = Array.from(this.children).filter(
150+
el => el.tagName.toLocaleLowerCase() === "f-trow"
151+
) as FTrow[];
138152
if (event.detail.value === true) {
139153
allRows.forEach(r => {
140154
if (!r.disableSelection) {
@@ -167,9 +181,12 @@ export class FTable extends FRoot {
167181
}
168182

169183
dispatchSelectedRowEvent() {
170-
const selectedRows = this.querySelectorAll<FTrow>(
171-
":scope > f-trow[selected]:not([slot='header'])"
172-
);
184+
const selectedRows = Array.from(this.children).filter(
185+
el =>
186+
el.tagName.toLocaleLowerCase() === "f-trow" &&
187+
el.getAttribute("slot") !== "header" &&
188+
el.hasAttribute("selected")
189+
) as FTrow[];
173190
const toggle = new CustomEvent("selected-rows", {
174191
detail: Array.from(selectedRows),
175192
bubbles: true,
@@ -183,7 +200,9 @@ export class FTable extends FRoot {
183200
*/
184201
updateRadioChecks(element: HTMLElement) {
185202
if (this.selectable === "single") {
186-
const allRows = this.querySelectorAll<FTrow>(":scope > f-trow:not([slot='header'])");
203+
const allRows = Array.from(this.children).filter(
204+
el => el.tagName.toLocaleLowerCase() === "f-trow" && el.getAttribute("slot") !== "header"
205+
) as FTrow[];
187206

188207
allRows.forEach(row => {
189208
if (row.selected && row !== element) {
@@ -197,15 +216,21 @@ export class FTable extends FRoot {
197216
*/
198217
async updateHeaderSelectionCheckboxState() {
199218
if (this.selectable === "multiple") {
200-
const allRows = this.querySelectorAll<FTrow>(":scope > f-trow");
219+
const allRows = Array.from(this.children).filter(
220+
el => el.tagName.toLocaleLowerCase() === "f-trow"
221+
) as FTrow[];
201222
const rowsWithoutHeader = Array.from(allRows).filter(
202223
r => r.getAttribute("slot") !== "header"
203224
);
204225
const selectedRows = rowsWithoutHeader.filter(r => r.selected);
205-
const headerRow = this.querySelector<FTrow>(":scope > f-trow[slot='header']");
226+
const headerRow = Array.from(this.children).filter(
227+
el => el.tagName.toLocaleLowerCase() === "f-trow" && el.getAttribute("slot") === "header"
228+
)[0] as FTrow;
206229
if (headerRow) {
207230
await headerRow.updateComplete;
208-
const firstCell = headerRow.querySelector<FTcell>(":scope > f-tcell");
231+
const firstCell = Array.from(headerRow.children).filter(
232+
el => el.tagName.toLocaleLowerCase() === "f-tcell"
233+
)[0] as FTcell;
209234
if (firstCell?.checkbox) {
210235
if (selectedRows.length === 0) {
211236
headerRow.selected = false;
@@ -222,9 +247,13 @@ export class FTable extends FRoot {
222247

223248
toggleColumnHighlight(event: CustomEvent) {
224249
if (event.detail.columnIndex >= 0) {
225-
const allRows = this.querySelectorAll<FTrow>(":scope > f-trow");
250+
const allRows = Array.from(this.children).filter(
251+
el => el.tagName.toLocaleLowerCase() === "f-trow"
252+
) as FTrow[];
226253
allRows.forEach(row => {
227-
const allCells = row.querySelectorAll<FTrow>(":scope > f-tcell");
254+
const allCells = Array.from(row.children).filter(
255+
el => el.tagName.toLocaleLowerCase() === "f-tcell"
256+
) as FTcell[];
228257
if (event.detail.type === "add") {
229258
allCells[event.detail.columnIndex]?.classList.add("highlight");
230259
} else {
@@ -236,9 +265,13 @@ export class FTable extends FRoot {
236265

237266
toggleColumnSelected(event: CustomEvent) {
238267
if (event.detail.columnIndex >= 0) {
239-
const allRows = this.querySelectorAll<FTrow>(":scope > f-trow");
268+
const allRows = Array.from(this.children).filter(
269+
el => el.tagName.toLocaleLowerCase() === "f-trow"
270+
) as FTrow[];
240271
allRows.forEach(row => {
241-
const allCells = row.querySelectorAll<FTrow>(":scope > f-tcell");
272+
const allCells = Array.from(row.children).filter(
273+
el => el.tagName.toLocaleLowerCase() === "f-tcell"
274+
) as FTcell[];
242275
if (allCells[event.detail.columnIndex]) {
243276
allCells[event.detail.columnIndex].selected =
244277
!allCells[event.detail.columnIndex].selected;

‎packages/flow-table/src/components/f-trow/f-trow.ts

+13-5
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,10 @@ export class FTrow extends FRoot {
8484
): Promise<void> {
8585
super.updated(changedProperties);
8686
await this.updateComplete;
87-
const allCells = this.querySelectorAll(":scope > f-tcell");
87+
const allCells = Array.from(this.children).filter(
88+
el => el.tagName.toLocaleLowerCase() === "f-tcell"
89+
);
90+
8891
if (this.expndablePanel) {
8992
this.expndablePanel.style.gridColumnEnd = `${allCells.length + 1}`;
9093
}
@@ -96,7 +99,10 @@ export class FTrow extends FRoot {
9699
* propogate props related to chevron and checkbox and radio boxes
97100
*/
98101
propogateProps() {
99-
const firstCell = this.querySelector<FTcell>(":scope > f-tcell");
102+
const firstCell = Array.from(this.children).filter(
103+
el => el.tagName.toLocaleLowerCase() === "f-tcell"
104+
)[0] as FTcell;
105+
100106
firstCell?.setSelection(this.selected, Boolean(this.disableSelection));
101107
this.handleDetailsSlot();
102108
}
@@ -124,13 +130,15 @@ export class FTrow extends FRoot {
124130
}
125131
handleDetailsSlot() {
126132
if (this.detailsSlotElement.assignedNodes().length > 0) {
127-
const allCells = this.querySelectorAll<FTcell>(":scope > f-tcell");
133+
const allCells = Array.from(this.children).filter(
134+
el => el.tagName.toLocaleLowerCase() === "f-tcell"
135+
) as FTcell[];
128136

129137
let chevronCell;
130138
if (this.expandIconPosition === "left") {
131-
chevronCell = allCells.item(0);
139+
chevronCell = allCells[0];
132140
} else {
133-
chevronCell = allCells.item(allCells.length - 1);
141+
chevronCell = allCells[allCells.length - 1];
134142
}
135143
chevronCell.expandIcon = true;
136144
chevronCell.expandIconPosition = this.expandIconPosition as FTrowChevronPosition;

0 commit comments

Comments
 (0)