BUG: Using an Image in CreationDialog

[paavo]

I just experienced a weird Issue with Neos UI in multiple Neos 8.2 Projects.
If i add a Node with an Image set in the CreationDialog, it throws a JS-Error and fails.

image:
  type: Neos\Media\Domain\Model\ImageInterface
  ui:
    label: 'Bild (16:9)'
    showInCreationDialog: true

Error shim.js

caught at addNode 
 at hT 
 at _callee 
 at Tg 
 at Tg 
 at Tg 
 TypeError: Cannot read properties of undefined (reading 'get')

Affected Versions

Neos: 8.2.x
UI: 8.2.x

Works well with Neos 5.3 and Neos 7.3

[paavo]

@Sebobo we talked about that in Slack

[paavo]

i can reproduce the same issue in Neos 8.3

Affected Versions
Neos: 8.3.x
UI: 8.3.x

[paavo]

Can anyone else reproduce this issue?
Any workaround? Its pretty nasty for Nodes with required Images 🤔
@Sebobo @grebaldi

[grebaldi]

Hi @paavo,

I cannot reproduce this issue on 8.2 with the above configuration alone.

Error shim.js sounds like some plugin interfering with the dialog. Do you have anything installed that may hook into the ImageEditor (like the new Media UI)?

[Sebobo]

A full js stack trace and list of installed packages would be helpful

[adrian-cerdeira]

@grebaldi @Sebobo
I could reproduce this issue on Neos 8.3.
The problem is the forceCrop feature on ImageInterface:

            imageThreeTwo:
              type: Neos\Media\Domain\Model\ImageInterface
              ui:
                label: 'Image (3:2) [S]'
                reloadIfChanged: true
                inspector:
                  group: settings
                  editorOptions:
                    required: true
                    features:
                      crop: true
                    crop:
                      aspectRatio:
                        forceCrop: true
                        locked:
                          width: 3
                          height: 2

This creates in the creation dialog that you cannot apply the crop on the image.

And also an error on the console, because the image is undefined:

I hope this can help you further.

[Sebobo]

@adrian-cerdeira still cannot reproduce this with your example.
The crop is immediately shown, no error appears and close the crop selection again with the little arrow on the top right of it.
Though I noticed that the crop button in the image controls doesn't close the crop selection. So the whole dialog is a bit confusing in this case.

[paavo]

@Sebobo
I can reproduce the issue when an Image with forceCrop is shown in the CreationDialog.

              type: Neos\Media\Domain\Model\ImageInterface
              ui:
                showInCreationDialog: true
                inspector:
                  editorOptions:
                    required: true
                    features:
                      crop: true
                    crop:
                      aspectRatio:
                        forceCrop: true
                        locked:
                          width: 3
                          height: 2
                          ```

[Sebobo]

That's what I tried. Can one of you try to reproduce it in the Neos.Demo and make a video?

[bwaidelich]

I could not reproduce this issue with Neos.Demo and upon further investigation I realized that we had the following piece of configuration in our project:

Neos:
  Neos:
    userInterface:
      inspector:
        dataTypes:
          Neos\Media\Domain\Model\ImageInterface:
            editorOptions:
              crop:
                aspectRatio:
                  options: null

By setting this to an empty array instead, or adding the empty options array in the respective property configuration:

                    crop:
                      aspectRatio:
                        forceCrop: true
                        locked:
                          width: 3
                          height: 2
                        options: []

the error is gone for me.

@paavo can you confirm?

[Sebobo]

We should then create an issue in the UI to handle this case and not break.
We have far too many places in Neos which crash due to null values :(

[bwaidelich]

We should then create an issue in the UI to handle this case and not break.

we could just use this one :)

[Sebobo]

Ah sorry 🤦 I was mentally in a different repo...

[adrian-cerdeira]

I could not reproduce this issue with Neos.Demo and upon further investigation I realized that we had the following piece of configuration in our project:

Neos:
  Neos:
    userInterface:
      inspector:
        dataTypes:
          Neos\Media\Domain\Model\ImageInterface:
            editorOptions:
              crop:
                aspectRatio:
                  options: null

By setting this to an empty array instead, or adding the empty options array in the respective property configuration:

                    crop:
                      aspectRatio:
                        forceCrop: true
                        locked:
                          width: 3
                          height: 2
                        options: []

the error is gone for me.

@paavo can you confirm?

I testet this but sadly for me it doesn't resolve, the error is still present:

            imageThreeTwo:
              type: Neos\Media\Domain\Model\ImageInterface
              ui:
                label: 'Bild (3:2)'
                reloadIfChanged: true
                inspector:
                  group: settings
                  editorOptions:
                    required: true
                    features:
                      crop: true
                    crop:
                      aspectRatio:
                        forceCrop: true
                        locked:
                          width: 3
                          height: 2
                        options: []

[bwaidelich]

@adrian-cerdeira I just tested your settings and it works for me with Neos 8.3.
Maybe it's a different issue for you? You could install the "React Developer Tools" extension to see which options are passed to the component: