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(