diff --git a/sample/yarn.lock b/sample/yarn.lock
index 77f0dcfe..be02e04f 100644
--- a/sample/yarn.lock
+++ b/sample/yarn.lock
@@ -7207,14 +7207,7 @@ react-time-picker@latest:
languageName: node
linkType: hard
-"ws@npm:^6.2.1":
- version: 6.2.1
- resolution: "ws@npm:6.2.1"
- dependencies:
- async-limiter: ~1.0.0
- checksum: 35d32b09e28f799f04708c3a7bd9eff469ae63e60543d7e18335f28689228a42ee21210f48de680aad6e5317df76b5b1183d1a1ea4b4d14cb6e0943528f40e76
- languageName: node
- linkType: hard
+
"y18n@npm:^4.0.0":
version: 4.0.1
diff --git a/src/TimeInput/Hour12Input.jsx b/src/TimeInput/Hour12Input.jsx
index 6d55dae7..10828404 100644
--- a/src/TimeInput/Hour12Input.jsx
+++ b/src/TimeInput/Hour12Input.jsx
@@ -44,7 +44,7 @@ export default function Hour12Input({
return minHourResult;
})());
- const value12 = value ? convert24to12(value)[0].toString() : '';
+ const value12 = (value || value === 0) ? convert24to12(value)[0].toString() : '';
return (
{
expect(input.prop('value')).toBe(`${value - 12}`);
});
+ // This is an edge case that can occur when using react-datetime-picker
+ // See react-datetime-picker/src/DateTimeInput.jsx:444
+ it('displays midnight when the value is the number zero', () => {
+ const value = 0;
+
+ const component = mount(
+ ,
+ );
+
+ const input = component.find('input');
+
+ expect(input.prop('value')).toBe('12');
+ });
+
it('does not disable input by default', () => {
const component = mount(
,
diff --git a/src/TimeInput/Input.jsx b/src/TimeInput/Input.jsx
index 4664dbd0..9101e390 100644
--- a/src/TimeInput/Input.jsx
+++ b/src/TimeInput/Input.jsx
@@ -94,9 +94,9 @@ export default function Input({
}) {
const hasLeadingZero = (
showLeadingZeros
- && value
+ && (value || value === 0)
&& value < 10
- && (value === '0' || !value.toString().startsWith('0'))
+ && value.toString().length === 1
);
const maxLength = max ? max.toString().length : null;
diff --git a/src/TimeInput/MinuteInput.spec.jsx b/src/TimeInput/MinuteInput.spec.jsx
index beaa43ae..c05928ce 100644
--- a/src/TimeInput/MinuteInput.spec.jsx
+++ b/src/TimeInput/MinuteInput.spec.jsx
@@ -78,6 +78,22 @@ describe('MinuteInput', () => {
expect(input.prop('className')).toContain(`${defaultProps.className}__input--hasLeadingZero`);
});
+ // This is an edge case that can occur when using react-datetime-picker
+ it('renders "0" given showLeadingZeros if minute is the number 0', () => {
+ const component = mount(
+ ,
+ );
+
+ const input = component.find('input');
+
+ expect(component.text()).toContain('0');
+ expect(input.prop('className')).toContain(`${defaultProps.className}__input--hasLeadingZero`);
+ });
+
it('does not render "0" given showLeadingZeros if minute is <10 with leading zero already', () => {
const component = mount(
{
expect(input.prop('className')).toContain(`${defaultProps.className}__input--hasLeadingZero`);
});
+ // This is an edge case that can occur when using react-datetime-picker
+ it('renders "0" given showLeadingZeros if second is the number 0', () => {
+ const component = mount(
+ ,
+ );
+
+ const input = component.find('input');
+
+ expect(component.text()).toContain('0');
+ expect(input.prop('className')).toContain(`${defaultProps.className}__input--hasLeadingZero`);
+ });
+
it('does not render "0" given showLeadingZeros if second is <10 with leading zero already', () => {
const component = mount(