Skip to content

Autocomplete Dropdown Overflows Container in Safari/Mobile Chrome #7235

@jamiehollern

Description

@jamiehollern

Describe the bug

After upgrading from EasyAdmin 4.24.7 to 4.24.8 (and all subsequent versions through 4.27.3), autocomplete field dropdowns are broken in Safari (desktop and mobile) and mobile Chrome. The dropdown content overflows its container boundaries instead of being properly scrollable within a constrained box. This makes autocomplete fields unusable on these browsers.

Desktop Chrome on Windows and macOS continues to work correctly.

To Reproduce

  1. Use EasyAdmin Bundle version 4.24.8 or later (tested up to 4.27.3)
  2. Create any CRUD controller with an autocomplete field (e.g., AutocompleteField::new('team'))
  3. Ensure there are enough options to require scrolling to load more
  4. Open the form page in Safari (any version, desktop or iOS) or Chrome on mobile (iOS/Android)
  5. Click on the autocomplete field to trigger the dropdown
  6. Observe that the dropdown content extends beyond its container boundaries instead of being scrollable within a fixed-height box

Root Cause

The bug was introduced in v4.24.8 when assets/css/easyadmin-theme/autocomplete.css was updated. The .ts-dropdown-content selector changed from using physical CSS properties to logical properties:

/* v4.24.7 (working) */
.ts-dropdown-content {
    overflow-x: hidden;
    overflow-y: auto;
}

/* v4.24.8+ (broken in Safari/mobile Chrome) */
.ts-dropdown-content {
    overflow-inline: hidden;
    overflow-block: auto;
}

Safari and mobile Chrome have poor/inconsistent support for logical overflow properties (overflow-inline and overflow-block), causing the dropdown to overflow instead of scrolling.

Workaround

Until fixed, users can override the broken CSS in their projects:

/* public/css/admin-fixes.css */
.ts-dropdown-content {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overflow-inline: unset !important;
    overflow-block: unset !important;
}

Additional context

Environment:

  • EasyAdmin Bundle: 4.24.8 through 4.27.3 (all affected)
  • Last working version: 4.24.7
  • Symfony: 7.3
  • PHP: 8.4

v4.24.7
Image

v4.24.8
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions