bug(MATSELECT): Now that overlayDir is protected (_overlayDir) what is the best practice way of accessing this?

[khepf]

Reproduction

select.d.ts used to have:

/**
     * Overlay pane containing the options.
     * @deprecated To be turned into a private API.
     * @breaking-change 10.0.0
     * @docs-private
     */
    overlayDir: CdkConnectedOverlay;

But now, it's protected:

/** Overlay pane containing the options. */
    protected _overlayDir: CdkConnectedOverlay;

What is the best practices way of accessing this now that it is protected? I use overlayDir to modify the location of select dropdowns and I am not sure how to access this now that it is protected, or if I even should be accessing it in this manner any longer. Is there a new preferred way to modify the location of select dropdowns?

Expected Behavior

What behavior were you expecting to see?

• overlayDir as an accessible option

Actual Behavior

What behavior did you actually see?

• _overlayDir is now protected

Environment

• Angular: 12.2.5
• CDK/Material: 12.2.5
• Browser(s): Chrome, Safari
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

The overlayRef was exposed accidentally and now it has been hidden so there's no way of accessing it. What were you trying to do with it?

[khepf]

It is the overlayDir.positions I had been accessing. For the purpose of offsetting select columns so they appear below the select box, not on top of it. For example:

let selectionOverlay = this.matSelect.overlayDir as CdkConnectedOverlay;
      selectionOverlay.positions = [
        {
          offsetX: 1,
          offsetY: 0,
          originX: 'start',
          originY: 'bottom',
          overlayX: 'start',
          overlayY: 'top'
        }
      ];

Is there a more conventional, best practices way to do so?

[crisbeto]

We're moving away from positioning the dropdown on top of the select. You can try our new select based on top of MDC's styles. The API and behavior is exactly the same since it shares the same base class as the current select, but the CSS will be slightly different and the dropdown is only positioned above/below. You can try it by importing MatSelectModule from @angular/material-experimental/mdc-select instead of @angular/material/select.

[crisbeto]

Closing due to inactivity.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}