Skip to content

Commit c93adcd

Browse files
PKulkoRaccoonGangPKulkoRaccoonGang
authored
fix: fixed Form.Checkbox value in DataTable component (#3881)
1 parent 6c19e8e commit c93adcd

File tree

5 files changed

+56
-25
lines changed

5 files changed

+56
-25
lines changed

‎src/DataTable/README.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -423,17 +423,17 @@ See ``dataViewToggleOptions`` props documentation for all supported props.
423423
Filter: CheckboxFilter,
424424
filter: 'includesValue',
425425
filterChoices: [{
426-
name: 'orange tabby',
426+
name: 'Orange Tabby',
427427
number: 1,
428428
value: 'orange tabby',
429429
},
430430
{
431-
name: 'brown tabby',
431+
name: 'Brown Tabby',
432432
number: 1,
433433
value: 'brown tabby',
434434
},
435435
{
436-
name: 'siamese',
436+
name: 'Siamese',
437437
number: 1,
438438
value: 'siamese',
439439
}],
@@ -503,17 +503,17 @@ See ``dataViewToggleOptions`` props documentation for all supported props.
503503
Filter: CheckboxFilter,
504504
filter: 'includesValue',
505505
filterChoices: [{
506-
name: 'orange tabby',
506+
name: 'Orange Tabby',
507507
number: 1,
508508
value: 'orange tabby',
509509
},
510510
{
511-
name: 'brown tabby',
511+
name: 'Brown Tabby',
512512
number: 1,
513513
value: 'brown tabby',
514514
},
515515
{
516-
name: 'siamese',
516+
name: 'Siamese',
517517
number: 1,
518518
value: 'siamese',
519519
}]
@@ -1306,17 +1306,17 @@ For a more desktop friendly view, you can move filters into a sidebar by providi
13061306
Filter: CheckboxFilter,
13071307
filter: 'includesValue',
13081308
filterChoices: [{
1309-
name: 'orange tabby',
1309+
name: 'Orange Tabby',
13101310
number: 2,
13111311
value: 'orange tabby',
13121312
},
13131313
{
1314-
name: 'brown tabby',
1314+
name: 'Brown Tabby',
13151315
number: 2,
13161316
value: 'brown tabby',
13171317
},
13181318
{
1319-
name: 'siamese',
1319+
name: 'Siamese',
13201320
number: 1,
13211321
value: 'siamese',
13221322
}]
@@ -1659,17 +1659,17 @@ After selecting the maximum possible number of rows, you can display an error me
16591659
filter: 'includesValue',
16601660
filterChoices: [
16611661
{
1662-
name: 'russian white',
1662+
name: 'Russian white',
16631663
number: 1,
16641664
value: 'russian white',
16651665
},
16661666
{
1667-
name: 'orange tabby',
1667+
name: 'Orange Tabby',
16681668
number: 2,
16691669
value: 'orange tabby',
16701670
},
16711671
{
1672-
name: 'brown tabby',
1672+
name: 'Brown Tabby',
16731673
number: 3,
16741674
value: 'brown tabby',
16751675
},

‎src/DataTable/filters/CheckboxFilter.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function CheckboxFilter({
3131
{filterChoices.map(({ name, number, value }) => (
3232
<Form.Checkbox
3333
key={`${headerBasedId}${name}`}
34-
value={name}
34+
value={value}
3535
checked={checkedBoxes.includes(value)}
3636
onChange={() => changeCheckbox(value)}
3737
aria-label={name}

‎src/DataTable/filters/tests/CheckboxFilter.test.jsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,4 +83,35 @@ describe('<CheckboxFilter />', () => {
8383
expect(checkbox).not.toBeChecked();
8484
});
8585
});
86+
87+
it('uses value for filtering when name and value differ', async () => {
88+
const testChoice = { name: 'Test', value: 'test' };
89+
const propsWithCaseDifference = {
90+
column: {
91+
...props.column,
92+
filterChoices: [testChoice],
93+
filterValue: [],
94+
},
95+
};
96+
97+
const { rerender } = render(<CheckboxFilter {...propsWithCaseDifference} />);
98+
99+
const checkbox = screen.getByLabelText(testChoice.name);
100+
101+
await userEvent.click(checkbox);
102+
103+
expect(setFilterMock).toHaveBeenCalledWith([testChoice.value]);
104+
105+
rerender(<CheckboxFilter column={{
106+
...propsWithCaseDifference.column,
107+
filterValue: [testChoice.value],
108+
}}
109+
/>);
110+
111+
expect(checkbox).toBeChecked();
112+
113+
await userEvent.click(checkbox);
114+
115+
expect(setFilterMock).toHaveBeenCalledWith([]);
116+
});
86117
});

‎src/DataTable/tablecontrolbar.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,22 +73,22 @@ It always shows the `SmartStatus` component. If applicable, it displays the `Dro
7373
Filter: CheckboxFilter,
7474
filter: 'includesValue',
7575
filterChoices: [{
76-
name: 'russian white',
76+
name: 'Russian white',
7777
number: 1,
7878
value: 'russian white',
7979
},
8080
{
81-
name: 'orange tabby',
81+
name: 'Orange Tabby',
8282
number: 2,
8383
value: 'orange tabby',
8484
},
8585
{
86-
name: 'brown tabby',
86+
name: 'Brown Tabby',
8787
number: 3,
8888
value: 'brown tabby',
8989
},
9090
{
91-
name: 'siamese',
91+
name: 'Siamese',
9292
number: 1,
9393
value: 'siamese',
9494
}]

‎src/DataTable/tablefilters.mdx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -104,22 +104,22 @@ all filters will be rendered in the dropdown.
104104
Filter: CheckboxFilter,
105105
filter: 'includesValue',
106106
filterChoices: [{
107-
name: 'russian white',
107+
name: 'Russian white',
108108
number: 1,
109109
value: 'russian white',
110110
},
111111
{
112-
name: 'orange tabby',
112+
name: 'Orange Tabby',
113113
number: 2,
114114
value: 'orange tabby',
115115
},
116116
{
117-
name: 'brown tabby',
117+
name: 'Brown Tabby',
118118
number: 3,
119119
value: 'brown tabby',
120120
},
121121
{
122-
name: 'siamese',
122+
name: 'Siamese',
123123
number: 1,
124124
value: 'siamese',
125125
}]
@@ -227,22 +227,22 @@ all filters will be rendered in the dropdown.
227227
Filter: CheckboxFilter,
228228
filter: 'includesValue',
229229
filterChoices: [{
230-
name: 'russian white',
230+
name: 'Russian white',
231231
number: 1,
232232
value: 'russian white',
233233
},
234234
{
235-
name: 'orange tabby',
235+
name: 'Orange Tabby',
236236
number: 2,
237237
value: 'orange tabby',
238238
},
239239
{
240-
name: 'brown tabby',
240+
name: 'Brown Tabby',
241241
number: 3,
242242
value: 'brown tabby',
243243
},
244244
{
245-
name: 'siamese',
245+
name: 'Siamese',
246246
number: 1,
247247
value: 'siamese',
248248
}]

0 commit comments

Comments
 (0)