Umbraco.Forms 13.1.2: Date field throws a console error on blur when no value is selected
Closed this issue · 2 comments
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
- Create a solution running Umbraco.Forms 13.1.2.
- Create a form with a Date field and add it to a page.
- On said page, focus the Date field to show the date picker.
- Without selecting a date, blur the Date field to hide the date picker.
- 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
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.
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.