Icon dropdown sits behind other fields

CjRootStudio commented 1 year ago

Bug description

When nested inside of a Grid or Replicator field, the new Icon fieldtype seems to have a z-index issue and sits behind other fields below it. I'm unable to select an option from the dropdown as a result.

A temporary workaround is using my arrow keys to cycle through the dropdown and using enter to select the icon.

How to reproduce

Add an Icon fieldtype into a Grid or Replicator field with more than 1 Icon available to select. View the template and try to select an icon from the dropdown.

Logs

No response

Environment

Environment
Application Name: Statamic
Laravel Version: 9.52.7
PHP Version: 8.1.12
Composer Version: 2.4.4
Environment: local
Debug Mode: ENABLED
URL: statamic.test/
Maintenance Mode: OFF

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: pusher
Cache: redis
Database: mysql
Logs: stack / single
Mail: smtp
Queue: sync
Session: file

Statamic
Addons: 4
Antlers: runtime
Stache Watcher: Disabled
Static Caching: Disabled
Version: 4.1.3 PRO

Statamic Addons
aryehraber/statamic-logbook: 3.1.0
jacksleight/statamic-bard-texstyle: 3.1.0
jonassiewertsen/statamic-livewire: 2.12.0
rootstudio/monitor: 0.1

Installation

Fresh statamic/statamic site via CLI

Antlers Parser

runtime (new)

Additional details

No response

jasonvarga commented 1 year ago

Can you share the blueprint?

CjRootStudio commented 1 year ago

I've attached the blueprint and 2 fieldsets I am using. It consists of a primary 'Card' fieldset, which is then imported into a separate fieldset called 'Image Card'. That Fieldset is then imported into a Grid fieldtype which is able to be selected via a replicator field. Hopefully that makes sense!

Cheers,

blueprints-fieldsets.zip

jeroenmager commented 1 year ago

I'm having the same issue. When i have an iconamic field inside of a fieldset and i try to use this fieldset in a replicator i get exactly the same

helloiamlukas commented 1 year ago

@jasonvarga Could you already recreate this? I'm having the same problem and can provide an example repo if needed.

jasonvarga commented 1 year ago

If you can that would be appreciated.

helloiamlukas commented 1 year ago

Look into the content field of the articles collection here: https://github.com/helloiamlukas/statamic-example-repo

helloiamlukas commented 1 year ago

Ok, I think I solved the mystery: It is important to add append-to-body to the <v-select> tag.

<v-select
  append-to-body
  :value="value"
  :options="meta.options"
  …
>

jasonvarga commented 1 year ago

@CjRootStudio I can't recreate this issue with what you've provided. If you can provide a repo with this demonstrated that would be helpful.

@helloiamlukas I can see the issue in your provided repo. However it's happening in a custom fieldtype you created that uses v-select explicitly. The native select fieldtype doesn't have this issue. The solution is what you've discovered, to add append-to-body.

CjRootStudio commented 1 year ago

@jasonvarga After digging further I have found the the issue on my end was also caused by a custom v-select field and the same solution applied. Mystery solved, thanks!

statamic / cms