Skip to content

Cannot open Dropdowns popup when inside a Dialog with rtl mode enabled and small resolution #4530

Open
@mbechev

Description

@mbechev

Description

When displaying any dropdown component inside a Dialog, the popup cannot be opened. This happens when dir property of the document is set to rtl and on a small resolution 540x720.

  ngAfterViewInit() {
    const documentElement = this.document.documentElement;
    this.renderer.setAttribute(documentElement, 'dir', 'rtl');
  }

Steps To Reproduce

  1. Open the demo in a new window
  2. Enable the emulator and set the resolution to 540x720:
  3. Open the Dialog and try to open the ComboBox popup.
    https://stackblitz.com/edit/angular-3xi553zf-pyuzmyso

Screenshots or video

Screen.Recording.2025-01-30.at.12.39.34.mov

Actual Behavior

The popup is immediately closed which leads to this flickering. Using the Window component doesn't produce such an error:
https://stackblitz.com/edit/angular-3xi553zf-ndqhy

Expected Behavior

The functionality of the dropdowns should not be affected by this configuration.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions