# AUR0779

## Error Message

`AUR0779: Invalid portal insertion position: <position>`

Where `<position>` is the invalid value provided to the `position` bindable attribute of the `portal`.

## Description

This error occurs when using the `portal` template controller (often implicitly via the `portal` attribute) and providing an invalid value for the `position` bindable attribute. The `position` attribute determines where the portal's content should be inserted relative to its target element.

## Cause

The error is caused by setting the `position` attribute on a `portal` element or custom attribute to a string value other than the allowed options.

The valid values for the `position` attribute are:

* `'beforebegin'`: Before the target element itself.
* `'afterbegin'`: Just inside the target element, before its first child.
* `'beforeend'`: Just inside the target element, after its last child. (This is often the default)
* `'afterend'`: After the target element itself.

Any other string value provided will result in this error.

## Solution

1. **Check `position` Value:** Review the template where the `portal` attribute is used and ensure the value bound to the `position` attribute is one of the four valid strings: `'beforebegin'`, `'afterbegin'`, `'beforeend'`, or `'afterend'`.
2. **Verify Binding:** If the `position` is dynamically bound (e.g., `position.bind="myPosition"`), ensure that the view model property (`myPosition` in this case) always resolves to one of the valid strings.
3. **Default Behavior:** If you want the default behavior (usually `'beforeend'`), you can often omit the `position` attribute entirely, depending on the portal's configuration.

## Example

```html
<!-- Assume 'renderTarget' is an element reference -->

<!-- Incorrect: 'inside' is not a valid position -->
<template portal="target.bind: renderTarget; position: 'inside'">
  <div>My portal content</div>
</template>

<!-- Incorrect: Typo in position value -->
<template portal="target.bind: renderTarget; position: 'beforeEnd'"> <!-- Case-sensitive! -->
  <div>My portal content</div>
</template>

<!-- Correct: Using a valid position -->
<template portal="target.bind: renderTarget; position: 'afterbegin'">
  <div>My portal content</div>
</template>

<!-- Correct: Using binding with a valid value in the view model -->
<template portal="target.bind: renderTarget; position.bind: insertPosition">
  <div>My portal content</div>
</template>
```

```typescript
// View Model
import { customElement } from 'aurelia';

@customElement({ /* ... */ })
export class MyComponent {
  renderTarget: HTMLElement; // Assume this is assigned elsewhere
  insertPosition: 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' = 'beforeend';

  // Ensure this property is always one of the valid strings
  // insertPosition = 'invalid'; // This would cause AUR0779
}
```

## Debugging Tips

* Inspect the DOM to verify the element targeted by the portal exists.
* Check the value being passed to the `position` attribute in the template.
* If bound, log the value of the view model property bound to `position` just before the portal attempts to render or move its content.
* Refer to the documentation for `Element.insertAdjacentHTML()` on MDN, as the `position` values correspond directly to its `position` parameter.

```
```