Skip to content

Commit 9df3381

Browse files
author
Eric Olkowski
committed
fix(DatePicker): prevented textless helper text from rendering
1 parent 06f0914 commit 9df3381

File tree

3 files changed

+87
-9
lines changed

3 files changed

+87
-9
lines changed

‎packages/react-core/src/components/DatePicker/DatePicker.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,9 @@ const DatePickerBase = (
161161
}, [value]);
162162

163163
const applyValidators = (date: Date) => {
164-
setErrorText(validators.map((validator) => validator(date)).join('\n') || '');
164+
const validatorResults = validators.map((validator) => validator(date));
165+
const validatorsToApply = validatorResults.filter((validator) => validator !== '');
166+
setErrorText(validatorsToApply.join('\n') || '');
165167
};
166168

167169
const onTextInput = (event: React.FormEvent<HTMLInputElement>, value: string) => {

‎packages/react-core/src/components/DatePicker/__tests__/DatePicker.test.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,30 @@ test('disabled date picker', () => {
1111
expect(asFragment()).toMatchSnapshot();
1212
});
1313

14-
test('Date picker with multiple validators does not show invalid icon on valid input', async () => {
14+
test('Does not render aria-invalid input when multiple validators return empty strings', async () => {
1515
const user = userEvent.setup();
1616

1717
const rangeValidator = (_date: Date) => '';
18-
1918
const rangeValidatorB = (_date: Date) => '';
20-
21-
render(<DatePicker value="2020-03-17" validators={[rangeValidator, rangeValidatorB]} />);
19+
const { asFragment } = render(<DatePicker value="2020-03-17" validators={[rangeValidator, rangeValidatorB]} />);
2220

2321
await user.click(screen.getByRole('textbox'));
24-
2522
await user.click(document.body);
2623
expect(screen.getByRole('textbox')).not.toBeInvalid();
2724
});
2825

26+
test('Does not render helper text when multiple validators return empty strings', async () => {
27+
const user = userEvent.setup();
28+
29+
const rangeValidator = (_date: Date) => '';
30+
const rangeValidatorB = (_date: Date) => '';
31+
const { asFragment } = render(<DatePicker value="2020-03-17" validators={[rangeValidator, rangeValidatorB]} />);
32+
33+
await user.click(screen.getByRole('textbox'));
34+
await user.click(document.body);
35+
expect(asFragment()).toMatchSnapshot();
36+
});
37+
2938
test('Error state can be cleared from outside', async () => {
3039
const rangeValidator = (date: Date) => {
3140
if (date < new Date('2020-03-17')) {

‎packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap‎

Lines changed: 70 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,72 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Does not render helper text when multiple validators return empty strings 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="pf-v6-c-date-picker"
7+
style="--pf-v6-c-date-picker__input--c-form-control--width-chars: 10;"
8+
>
9+
<div
10+
class="pf-v6-c-date-picker__input"
11+
>
12+
<div
13+
class="pf-v6-c-input-group"
14+
>
15+
<div
16+
class="pf-v6-c-input-group__item"
17+
>
18+
<span
19+
class="pf-v6-c-form-control"
20+
>
21+
<input
22+
aria-invalid="false"
23+
aria-label="Date picker"
24+
data-ouia-component-id="OUIA-Generated-TextInputBase-3"
25+
data-ouia-component-type="PF6/TextInput"
26+
data-ouia-safe="true"
27+
placeholder="YYYY-MM-DD"
28+
type="text"
29+
value="2020-03-17"
30+
/>
31+
</span>
32+
</div>
33+
<div
34+
class="pf-v6-c-input-group__item"
35+
>
36+
<button
37+
aria-haspopup="dialog"
38+
aria-label="Toggle date picker"
39+
class="pf-v6-c-button pf-m-control"
40+
data-ouia-component-id="OUIA-Generated-Button-control-3"
41+
data-ouia-component-type="PF6/Button"
42+
data-ouia-safe="true"
43+
type="button"
44+
>
45+
<span
46+
class="pf-v6-c-button__icon"
47+
>
48+
<svg
49+
aria-hidden="true"
50+
class="pf-v6-svg"
51+
fill="currentColor"
52+
height="1em"
53+
role="img"
54+
viewBox="0 0 448 512"
55+
width="1em"
56+
>
57+
<path
58+
d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
59+
/>
60+
</svg>
61+
</span>
62+
</button>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
</DocumentFragment>
68+
`;
69+
370
exports[`With popover opened 1`] = `
471
<DocumentFragment>
572
<div
@@ -21,7 +88,7 @@ exports[`With popover opened 1`] = `
2188
<input
2289
aria-invalid="false"
2390
aria-label="Date picker"
24-
data-ouia-component-id="OUIA-Generated-TextInputBase-4"
91+
data-ouia-component-id="OUIA-Generated-TextInputBase-5"
2592
data-ouia-component-type="PF6/TextInput"
2693
data-ouia-safe="true"
2794
placeholder="YYYY-MM-DD"
@@ -37,7 +104,7 @@ exports[`With popover opened 1`] = `
37104
aria-haspopup="dialog"
38105
aria-label="Toggle date picker"
39106
class="pf-v6-c-button pf-m-control"
40-
data-ouia-component-id="OUIA-Generated-Button-control-4"
107+
data-ouia-component-id="OUIA-Generated-Button-control-5"
41108
data-ouia-component-type="PF6/Button"
42109
data-ouia-safe="true"
43110
type="button"
@@ -185,7 +252,7 @@ exports[`With popover opened 1`] = `
185252
<input
186253
aria-invalid="false"
187254
aria-label="Select year"
188-
data-ouia-component-id="OUIA-Generated-TextInputBase-5"
255+
data-ouia-component-id="OUIA-Generated-TextInputBase-6"
189256
data-ouia-component-type="PF6/TextInput"
190257
data-ouia-safe="true"
191258
type="number"

0 commit comments

Comments
 (0)