Preview error when using an Umb.PropertyEditorUi.Dropdown on 3.0.0 with umbraco 15.1.1

[isIulian]

Which Umbraco.Community.BlockPreview version are you using?

3.0.0

Which Umbraco version are you using? For example: 10.4.0 - don't just write v10

15.1.1

Bug summary

In a umbraco project I'm using the package blockgrid to create different sections of a page.
When using property with of Umb.PropertyEditorUi.Dropdown, on direct block or nested ones,
the preview request generates and exception.

System.Text.Json.JsonException: 'S' is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0.
 ---> System.Text.Json.JsonReaderException: 'S' is an invalid start of a value. LineNumber: 0 | BytePositionInLine: 0.
   at System.Text.Json.ThrowHelper.ThrowJsonReaderException(Utf8JsonReader& json, ExceptionResource resource, Byte nextByte, ReadOnlySpan`1 bytes)
   at System.Text.Json.Utf8JsonReader.ConsumeValue(Byte marker)
   at System.Text.Json.Utf8JsonReader.ReadFirstToken(Byte first)
   at System.Text.Json.Utf8JsonReader.ReadSingleSegment()
   at System.Text.Json.Serialization.JsonConverter`1.ReadCore(Utf8JsonReader& reader, T& value, JsonSerializerOptions options, ReadStack& state)
   --- End of inner exception stack trace ---
   at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& state, JsonReaderException ex)
   at System.Text.Json.Serialization.JsonConverter`1.ReadCore(Utf8JsonReader& reader, T& value, JsonSerializerOptions options, ReadStack& state)
   at System.Text.Json.JsonSerializer.ReadFromSpan[TValue](ReadOnlySpan`1 json, JsonTypeInfo`1 jsonTypeInfo)
   at Umbraco.Cms.Infrastructure.Serialization.SystemTextJsonSerializerBase.Deserialize[T](String input)
   at Umbraco.Cms.Core.PropertyEditors.ValueConverters.FlexibleDropdownPropertyValueConverter.ConvertSourceToIntermediate(IPublishedElement owner, IPublishedPropertyType propertyType, Object source, Boolean preview)
   at Umbraco.Cms.Core.Models.PublishedContent.PublishedPropertyType.ConvertSourceToInter(IPublishedElement owner, Object source, Boolean preview)
   at Umbraco.Cms.Core.PublishedCache.PublishedElementPropertyBase.GetInterValue()
   at Umbraco.Cms.Core.PublishedCache.PublishedElementPropertyBase.GetValue(String culture, String segment)
   at Umbraco.Extensions.PublishedPropertyExtension.Value[T](IPublishedProperty property, IPublishedValueFallback publishedValueFallback, String culture, String segment, Fallback fallback, T defaultValue)
   at Umbraco.Extensions.PublishedElementExtensions.Value[T](IPublishedElement content, IPublishedValueFallback publishedValueFallback, String alias, String culture, String segment, Fallback fallback, T defaultValue)
   at Umbraco.Cms.Web.Common.PublishedModels.RootBlock.get_Dropdown() in C:\Projects\umbraco-based-project-umbraco\src\umbraco-based-project.Web\umbraco\models\RootBlock.generated.cs:line 66
   at AspNetCoreGeneratedDocument.Views_Partials_blockgrid_Components_rootBlock_rootBlock.ExecuteAsync() in C:\Projects\umbraco-based-project-umbraco\src\umbraco-based-project.Web\Views\Partials\blockgrid\Components\rootBlock\rootBlock.cshtml:line 14
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context)
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, Boolean invokeViewStarts)
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context)
   at Umbraco.Community.BlockPreview.Services.BlockPreviewService.GetMarkupFromPartial(ControllerContext controllerContext, ViewDataDictionary viewData, String contentAlias, BlockType blockType)
   at Umbraco.Community.BlockPreview.Services.BlockPreviewService.GetMarkupFromPartial(ControllerContext controllerContext, ViewDataDictionary viewData, String contentAlias, BlockType blockType)
   at Umbraco.Community.BlockPreview.Services.BlockPreviewService.GetMarkup(ControllerContext controllerContext, String contentAlias, ViewDataDictionary viewData, BlockType blockType)
   at Umbraco.Community.BlockPreview.Services.BlockPreviewService.RenderGridBlock(String blockData, IPublishedContent content, ControllerContext controllerContext, String blockEditorAlias, Guid documentTypeUnique, String contentKey, String settingsKey)
   at Umbraco.Community.BlockPreview.Controllers.BlockPreviewApiController.PreviewGridBlock(String blockData, Guid nodeKey, String blockEditorAlias, String contentElementAlias, String culture, Guid documentTypeUnique, String contentUdi, String settingsUdi)

The exception is caused by .FlexibleDropdownPropertyValueConverter.ConvertSourceToIntermediate( that isn't recieving the expected formatted value.

Steps to reproduce

• Register a BlockList property on a document type
• Setup the BlockList property to add a block, one with a dropdown property and
  another one with a BlockList property to cotain a nested block with a dropdown property

Blocks setup from document page:

• PageBlocks (BlockList)
  • Block with dropdown property
  • Block with BlockList
    • Nested Block with dropdown property

Expected result / actual result

Generation of the preview with the value of the dropdown printed indifferently
from the nesting level.

[johnpscott]

Hi @isIulian,

I too have this issue on a V15 site using BlockGrid. Exactly the same error message when trying to render a BlockItem containing a Dropdown property.

regards

John

[rickbutterfield]

Hi @isIulian @johnpscott, I'm hoping to have a fix for this released tomorrow!

[isIulian]

Fantastic, when you have time to fix it will be awesome.
Take your time 😃, no problem.

[johnpscott]

That's great. Thank you Rick. I've plenty to do here, so no rush. Cheers. John Sent from Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: Iulian ***@***.***> Sent: Thursday, January 23, 2025 9:21:40 PM To: rickbutterfield/Umbraco.Community.BlockPreview ***@***.***> Cc: John Scott ***@***.***>; Mention ***@***.***> Subject: Re: [rickbutterfield/Umbraco.Community.BlockPreview] Preview error when using an Umb.PropertyEditorUi.Dropdown on 3.0.0 with umbraco 15.1.1 (Issue #88) Fantastic, when you have time to fix it will be awesome. Take your time 😃, no problem. — Reply to this email directly, view it on GitHub<#88 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AA5PS36TITWQ5IQYEDWJOF32MFMOJAVCNFSM6AAAAABVPARGGGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMMJRGA2DEMJTHA>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[rickbutterfield]

@isIulian @johnpscott v3.2.0 is now on NuGet, please test and report back!

[johnpscott]

Hi Rick,

Unfortunately I've had no joy with the new version. It continues to fail when there is a Dropdown list as a property of either the content or the settings model. I initially tried it on my main project and when that failed I started with a blank Umb 15 project with a GridBlock with only a very simple model. As a last resort I have forked your project and run your sample Umb 15 project.

The only change was to add a Height field to the Hero Block as here:

And updated the code to change the height of the hero as a quick kludge.

    @if (image is not null) {
        <div class="hero-background" style="background-image: url(@image.GetCropUrl(width:3840));height:@(Model.Content.Height)px">
        </div>
    }

This works in the front end but I get the following in the back office:

I hope this helps.

regards

John

[rickbutterfield]

Appreciate your patience and reproduction steps @johnpscott!

v3.2.1 has just been released with a bugfix in it for this issue. The test site has also been updated to include Block Grid and Block Lists featuring Dropdown and Content Picker, both as nested and non-nested blocks.

[johnpscott]

I couldn't persuade a fork from your new version to restore types and data using uSync. So I have removed all your content on my fork and added the minimum content and types to reproduce the error. There is a slight improvement - the dropdown works if it is part of the content of the grid item, however a dropdown list property in the settings data type throws an error if you attempt to use it in the partial view.

My changes are in a branch called: diagnostic-test in my fork of your package on https://github.com/johnpscott/Umbraco.Community.BlockPreview

I have tested this by cloning it rebuilding and usynch'ing my basic test. You will see the error still happens for a dropdown in the settings data type.

I have a lingering doubt about the stability of the core Umbraco 15 implementation of the settings functionality in the back office - there was a bug fix around this area which I spotted and proposed a fix for with settings in custom back office views (Umbraco issue #17989). I wonder whether there is another bug lurking somewhere, especially since the issue is now fixed for content, but not for settings - the underlying functionality is the same however the code in the TypeScript is different. The fix for issue #17989 was fixed by Niels by rolling the content code into a single common function called from either place (content and settings).

I hope this gives you a clue as to what might be happening. Sorry for sending this at the weekend - I am not expecting a quick reply as I have plenty of other dev aspects to concentrate on..

regards

John

[johnpscott]

My suspicion is correct - I've done some digging and the analysis is in the attached document.

I will take a look at the Umbraco source and see whether I can spot the issue.

Cheers

John

Umbraco Bug.docx

[rickbutterfield]

@johnpscott I think you're definitely on the right track there, but I'm handling that for the ContentData only here: https://github.com/rickbutterfield/Umbraco.Community.BlockPreview/blob/v3/dev/src/Umbraco.Community.BlockPreview/Services/BlockPreviewService.cs#L136

I think if I do the same thing for SettingsData like this, it would handle your use case:

 FormatBlockData(blockValue?.BlockValue.ContentData);
 BlockItemData? contentData = blockValue?.BlockValue?.ContentData.FirstOrDefault(x => x.Key == contentGuidParsed);
 if (contentData == null)
     return string.Format(Constants.ErrorMessages.ErrorTemplate, Constants.ErrorMessages.InvalidContentData);

 IPublishedElement? contentElement = ConvertToElement(contentData, true, content);

+FormatBlockData(blockValue?.BlockValue.SettingsData);
 BlockItemData? settingsData = settingsGuidParsed != Guid.Empty
     ? blockValue?.BlockValue?.SettingsData.FirstOrDefault(x => x.Key == settingsGuidParsed)
     : null;

Will give it a go and report back!

[rickbutterfield]

@johnpscott It was exactly as I thought! The SettingsData needs parsing in the same way as the ContentData to resolve some references. It'll also be helpful going forward if there are any datatypes causing trouble in the future.

Adding a dropdown to the settings of a block:

After adding FormatBlockData() for the SettingsData:

Also working on a nested Block Grid!

Look out for v3.2.2 on NuGet soon 😁

[johnpscott]

That's great. I look forward to trying it.

Meanwhile, I setup my demo in a fork of the main Umbraco repo and set a breakpoint on the DeserializeAndClone method.

I noticed that it gets called twice once internally via the backoffice and once by GridPreview. The internal call passes the dropdown list value as a string "["h2"]". The GridPreview call passes the value as an array with the single string value "h2". I don't know if this is significant.

Thanks for all your help.

John

[johnpscott]

I've just updated by main project to v3.2.2 and it has now sprung to life. 😊

Thanks again for all your work on this.

Cheers

John