aurelia-contrib / aurelia-portal-attribute Goto Github PK

I'm submitting a bug report

• Framework Version:
  1 - Aurelia CLI 3.0.1

• Operating System:
  OSX 14.4.1

• Node Version:
  18.17.1

• NPM Version:
  9.6.7

• Browser:
  all | Chrome XX

• Language:
  ESNext

Current behavior:
Using the portal attribute, like portal="target.bind: isMobile ? '.bncHeader' : '.bncOptionsWrapper'" puts the element with this attribute at the end of the body if the intended target element isn't rendered yet. Otherwise it works fine.
I can work around this problem by binding the to-be-portalled element later, when the target element is available in the DOM but this is not ideal.

Expected/desired behavior:
The target portal element should be re-evaluated while the DOM is still being rendered.

What is the motivation / use case for changing the behavior?
For a hybrid application for desktop / mobile some elements need to be portalled to somewhere else on mobile.

<div class="this is my target">
  <!-- I would like the portal injected here -->
  <div class="collapse-button"></div>
</div>

Use case: to control collpase-button dynamically based on injection:

.collapse-button {
  display: none;
}

.injected-class + .collapse-button {
  display: inline-block;
}

Too bad css is not flexible to say "if collapse-button is before injected-class".

Update: I could not use ref="" because the target dom is not in same view model.

Not sure if this works or I've got a standard setup

I'm submitting a bug report

• Framework Version:
  1.2.1

Please tell us about your environment:

• Operating System:
  OSX 10.13.1

• Node Version:
  9.5.0

• NPM Version:
  5.6.0

• Browser:
  all

• Language:
  TypeScript 2.6.2

Current behavior:
Portal render slots empty

Expected/desired behavior:
Render slot within element with portal

If you use the Aurelia CLI, install the plugin with the following command

au import aurelia-portal-attribute
change to
au install aurelia-portal-attribute