Merge pull request #27 from NHSDigital/feature/tjc-patch-date-input

Fix Uncontrolled Component Issue

Author: Tomdango

src/components/date-input/__tests__/__snapshots__/DateInput.test.tsx.snap

@@ -21,6 +21,7 @@ exports[`DateInput matches snapshot 1`] = `
           <IndividualDateInput
             inputType="day"
             pattern="[0-9]*"
+            type="number"
           >
             <div
               className="nhsuk-date-input__item"
@@ -54,6 +55,7 @@ exports[`DateInput matches snapshot 1`] = `
                   name="testInput-day"
                   onChange={[Function]}
                   pattern="[0-9]*"
+                  type="number"
                 />
               </div>
             </div>
@@ -63,6 +65,7 @@ exports[`DateInput matches snapshot 1`] = `
           <IndividualDateInput
             inputType="month"
             pattern="[0-9]*"
+            type="number"
           >
             <div
               className="nhsuk-date-input__item"
@@ -96,6 +99,7 @@ exports[`DateInput matches snapshot 1`] = `
                   name="testInput-month"
                   onChange={[Function]}
                   pattern="[0-9]*"
+                  type="number"
                 />
               </div>
             </div>
@@ -105,6 +109,7 @@ exports[`DateInput matches snapshot 1`] = `
           <IndividualDateInput
             inputType="year"
             pattern="[0-9]*"
+            type="number"
           >
             <div
               className="nhsuk-date-input__item"
@@ -138,6 +143,7 @@ exports[`DateInput matches snapshot 1`] = `
                   name="testInput-year"
                   onChange={[Function]}
                   pattern="[0-9]*"
+                  type="number"
                 />
               </div>
             </div>

src/components/date-input/components/IndividualDateInputs.tsx

@@ -44,8 +44,8 @@ const IndividualDateInput: React.FC<IndividualDateInputProps> = ({
 
   const inputID = id || `${ctxId}-${inputType}`;
   const inputName = name || `${ctxName}-${inputType}`;
-  const inputValue = value || ctxValue?.[inputType] || undefined;
-  const inputDefaultValue = defaultValue || ctxDefaultValue?.[inputType] || undefined;
+  const inputValue = value !== undefined ? value : ctxValue?.[inputType];
+  const inputDefaultValue = defaultValue !== undefined ? defaultValue : ctxDefaultValue?.[inputType];
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     e.persist();
@@ -95,6 +95,7 @@ const IndividualDateInput: React.FC<IndividualDateInputProps> = ({
 
 IndividualDateInput.defaultProps = {
   pattern: '[0-9]*',
+  type: 'number',
 };
 
 export const DayInput: React.FC<Omit<IndividualDateInputProps, 'inputType'>> = props => (