Umbraco.Forms 13.1.2: Date field throws a console error on blur when no value is selected

[stephen-sherman]

Bug summary

The Umbraco Forms date field throws a console error on blur when no value is selected.

Specifics

Observed in multiple solutions running Umbraco.Forms 13.1.2.

Uncaught TypeError: Cannot set properties of null (setting 'value')
    at HTMLInputElement.<anonymous> (umbracoforms.min.js?v=13.1.2:1:7837)

This seems related to issue #1200 wherein the id attributes of the datepickerfield and datepickerfieldshadow fields were swapped in the .cshtml view. I suspect part of the umbracoforms.js script was not updated to match, i.e.:

var hiddenDatePickerField = id.substr(0, id.length - 2);

should be:

var hiddenDatePickerField = id + "_1";

Steps to reproduce

1. Create a solution running Umbraco.Forms 13.1.2.
2. Create a form with a Date field and add it to a page.
3. On said page, focus the Date field to show the date picker.
4. Without selecting a date, blur the Date field to hide the date picker.
5. Observe the error in the browser console window.

Expected result

No error is thrown.

Actual result

The above error is thrown.

---

This item has been added to our backlog AB#41969

[seanhakbb]

Our FieldType.DatePicker.cshtml looked like this: <input type="hidden" name="@Model.Name" id="@(Model.Id)" class="datepickerfieldshadow" value="@val" data-umb="@Model.Id" /> <input type="text" name="@Model.Name" id="@(Model.Id)_1" class="datepickerfield" autocomplete="off" value="@val" ... Which caused an null error when pickadate tried to get a reference and set value to the hidden input. The script always added a "_1" suffix

I moved the "_1" suffix to the hidden field instead and now we dont get blank values any more.

I'm not sure if our cshtml was old or if the script confused the two inputs causing a bug.

[AndyButland]

Thanks for the report here both (as well as the diagnosis and fix... bot of which look correct to me). We'll resolve this for the next releases of 13 and 14.