Fix edge cases where the number 0 is passed to an input

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

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 (
     <Input

src/TimeInput/Hour12Input.spec.jsx

@@ -150,6 +150,23 @@ describe('Hour12Input', () => {
     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(
+      <Hour12Input
+        {...defaultProps}
+        value={value}
+      />,
+    );
+
+    const input = component.find('input');
+
+    expect(input.prop('value')).toBe('12');
+  });
+
   it('does not disable input by default', () => {
     const component = mount(
       <Hour12Input {...defaultProps} />,

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;
 

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(
+      <MinuteInput
+        {...defaultProps}
+        showLeadingZeros
+        value={0}
+      />,
+    );
+
+    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(
       <MinuteInput

src/TimeInput/SecondInput.spec.jsx

@@ -78,6 +78,22 @@ describe('SecondInput', () => {
     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(
+      <SecondInput
+        {...defaultProps}
+        showLeadingZeros
+        value={0}
+      />,
+    );
+
+    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(
       <SecondInput

test/yarn.lock

@@ -10635,29 +10635,8 @@ fsevents@^2.1.2:
   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
 
-"ws@npm:^7.2.3":
-  version: 7.3.1
-  resolution: "ws@npm:7.3.1"
-  peerDependencies:
-    bufferutil: ^4.0.1
-    utf-8-validate: ^5.0.2
-  peerDependenciesMeta:
-    bufferutil:
-      optional: true
-    utf-8-validate:
-      optional: true
-  checksum: 9302f1f6658c5f3ecd6d35d1c5a38ad708d8e5404cba66ad884ead072ef7a4c948f54d728649a2cb3af1865ca0e15f903e0e2ac9df30c1a0d4dd00d00e6e0d4a
-  languageName: node
-  linkType: hard
+
 
 "xml-name-validator@npm:^3.0.0":
   version: 3.0.0

yarn.lock

@@ -8331,8 +8331,8 @@ fsevents@^2.1.2:
   linkType: hard
 
 "ws@npm:^7.2.3":
-  version: 7.3.0
-  resolution: "ws@npm:7.3.0"
+  version: 7.4.6
+  resolution: "ws@npm:7.4.6"
   peerDependencies:
     bufferutil: ^4.0.1
     utf-8-validate: ^5.0.2
@@ -8341,7 +8341,7 @@ fsevents@^2.1.2:
       optional: true
     utf-8-validate:
       optional: true
-  checksum: c1f386013bd30afa9e4d0aa28eee85767a9e1b8fa74fc482eac503840f1012c2c1339745be36b0737f0245515646892b6073e376deac911a7bdf1ec90fc0f86f
+  checksum: ffeb626d92f14aa3a67aa3784824c1d290131e25d225f4ca6b1b6b6d7ea754fca67694d89a5b99b144382365e1bccf1f7ec2f92df56f0d25f44939b070452f06
   languageName: node
   linkType: hard