Popover component not appearing

[ArakTaiRoth]

Issue reported by: fahad.mahmood@gov.ab.ca@gov.ab.ca
Web component version: 1.29.0
Angular/React version: Angular 3.2.0

Info

At smaller resolutions, a popover contained in a table will not actually appear when it should. The important part in the code below is [relative]="true". When that is supplied on the popover, the issue comes up, if it's removed there's no issue.

This can be replicated with the following code in Angular:

interface User {
  id: string;
  firstName: string;
  lastName: string;
  age: number;
}

export class TableComponent {
  users: User[] = [];

  constructor() {
    this.users = [
      {
        firstName: "Christian",
        lastName: "Batz",
        age: 18,
      },
      {
        firstName: "Brain",
        lastName: "Wisozk",
        age: 19,
      },
      {
        firstName: "Neha",
        lastName: "Jones",
        age: 23,
      },
      {
        firstName: "Tristin",
        lastName: "Buckridge",
        age: 31,
      },
    ];
  }

  handleSort(event: any) {
    const {sortBy, sortDir} = event.detail;
    this.users.sort(
      (a: any, b: any) => (a[sortBy] > b[sortBy] ? 1 : -1) * sortDir
    );
  }
}

<goa-table width="100%" mb="xl" (_sort)="handleSort($event)">
  <thead>
    <tr>
      <th>
        <goa-table-sort-header name="firstName"
          >First name and really long header</goa-table-sort-header
        >
      </th>
      <th>Another really long header</th>
      <th>Age</th>
      <th>Random Column 1</th>
      <th>Random Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of users; index as i">
      <td>{{ user.firstName }}</td>
      <td>{{ user.lastName }}</td>
      <td>{{ user.age }}</td>
      <td>
        <goa-popover [relative]="true">
          <p>This is a popover</p>
          It can be used for a number of different contexts.
          <div slot="target">
            <goa-button type="secondary" size="compact">Click me</goa-button>
          </div>
        </goa-popover>
      </td>
      <td>
        <goa-popover [relative]="true">
          <p>This is a popover</p>
          It can be used for a number of different contexts.
          <div slot="target">
            <goa-button type="secondary" size="compact">Click me</goa-button>
          </div>
        </goa-popover>
      </td>
    </tr>
  </tbody>
</goa-table>

Jam.dev link

https://jam.dev/c/05e661cc-7059-42f6-90ec-d2fb2e85215b

Acceptance Criteria

1. If the relative property is supplied on the Popover component, the popover should open regardless of screen real estate

[ArakTaiRoth]

This is blocked until story #2358 is finished and merged into alpha, then this needs to be re-tested.

[ArakTaiRoth]

Can't replicate any longer. Reached out to Fahad to see if they can confirm it's no longer an issue.

[Spark450]

@ArakTaiRoth did you end up getting any response back from Fahad.

[ArakTaiRoth]

@Spark450 Spoke with Fahad. He says he's still seeing the issue, I was unable to replicate with his code, but I was able to replicate #2790 , which I suspect is actually what he's seeing, waiting on his confirmation.

[ArakTaiRoth]

@Spark450 I worked with Fahad to replicate his issue again using our latest components. He has confirmed that his issue is actually the same as #2790 .

I've gone into that issue an edited it with far more information to properly replicate the problem and to include more details.

I believe we can close this issue now as well, as this issue as written can't be replicated any longer.

[Spark450]

Thanks @ArakTaiRoth I will close this issue since the work to fix is tracked in #2790 as you mentioned.