BUGFIX: select box and dropdown contents not visible in elevated inspector

[marcrobertscamao]

In a RichTextEditor the contents of a selectbox or dropdown are not visible once the contents have been edited. This is as the editable content area is elevated. This seems to be a problem introduced with #3538.

What I did

I increased the z-index on the selectbox and dropdown contents to align with that of an elevated dropdown contents.

How I did it

Replacing the default z-index variable --zIndex-DropdownContents-Context with --zIndex-SecondaryInspectorElevated-DropDownContents

How to verify it

In the Neos.Demo, replace the NodeTypes/Content/ContactForm/ContactForm.yaml message property with the following:

  message:
      type: string
      defaultValue: ''
      ui:
        label: i18n
        inspector:
          group: message
          editor: 'Neos.Neos/Inspector/Editors/RichTextEditor'
          editorOptions:
            placeholder: '<p>placeholder</p>'
            autoparagraph: true
            linking:
              anchor: true
              title: true
              relNofollow: true
              targetBlank: true
              download: true
            formatting:
              strong: true
              em: true
              u: true
              sub: true
              sup: true
              del: true
              p: true
              h1: true
              h2: true
              h3: true
              h4: true
              h5: true
              h6: true
              pre: true
              underline: true
              strikethrough: true
              removeFormat: true
              left: true
              right: true
              center: true
              justify: true
              table: true
              ol: true
              ul: true
              a: true

Then edit the message in the contact form at http://localhost:8081/neos/content?node=%2Fsites%2Fneosdemo%2Ffeatures%2Fforms%40user-admin%3Blanguage%3Den_US

Upon changing the text type from p to h1 for example it is no longer possible to change the format back as the dropdown contents are no longer accessible. This is also the case if you edit the content in any other way.

For simplicity I have added a before and after recording of the behaviour.

Before:

After:

[mhsdesign]

Thank you for taking care. I can confirm that this is a problem and using this higher index (70) is a good fix.

I still like to request a review from @grebaldi as he might now more about our z-index philosophy ;)

[markusguenther]

Thanks for investigating the issue and fixing it.