Can I attach an OverlayPanel to something else than a button?

[JPGygax68]

I'm trying to attach an OverlayPanel to a tl-input: Stackblitz

The panel does open, but it appears to be attached to the body element instead of the tl-input.

When attaching it to a tl-button as per your docs, it does work (see commented code in the html). Even then though, there seems to be something wrong with the panel, it has no background color.

[WilliamAguera]

Sorry for the docs, we are implementing a new one and updating them, the [color] property doesn't exist anymore on TlOverlayPanel. To do this you just style your wrapper div to your wished color.

The OverlayPanel uses overlay of angular/cdk so we have get an ElementRef to attach. When you hastag a component inside of HTML, angular pass the instance of that component. As a workaround to that, you can do this:

@ViewChild('inputField', { read: ElementRef, static: true }) input: ElementRef;

Then, pass the input variable to [elementOrigin] property.

I updated the stackblitz and we are updating the docs as soon as possible. https://stackblitz.com/edit/truly-ui-simple-7lqc5a

Close this issue as your doubts are answered.

Thank you for using truly-ui an helping to improve it.

[JPGygax68]

Thank you @WilliamAguera, the workaround works.

Are you planning to generalize elementOrigin to support some of your other components too?

[JPGygax68]

I found that the overlay panel that opens below my input field does not have the same width as the input field, and found the following workaround:

@ViewChild('inputField', { static: true }) inputFieldRef; // : TlInput;
@ViewChild('inputField', { read: ElementRef, static: true }) inputFieldElem: ElementRef;
@ViewChild('browsingPanel', { static: true }) browsingPanelRef; // : TlOverlayPanel;

...

// (clickAddon) event on the TlInput
onClickAddon() {
    this.browsingPanelRef.width = this.inputFieldElem.nativeElement.firstChild.offsetWidth + 'px';
    this.browsingPanelRef.toggle();
  }

Is there a better way?