@gitlab/eslint-plugin/docs/rules/vue-no-popover-target-dollar-el.md

GitLab package for our custom eslint rules

# @gitlab/vue-no-popover-target-dollar-el

Disallows function-form `:target` bindings on `<gl-popover>` and `<gl-tooltip>` where
the callback body ends in `.$el`.

`GlPopover` and `GlTooltip` accept a `:target` prop that is either a reference or a
zero-argument function returning one. The reference can be a plain DOM element
[or a Vue component instance](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/6006).
The components use `.$el` automatically when it exists, so accessing it
manually is unnecessary. This helps to avoid reference errors during teardown,
or other cases where the ref does not exist at the time the `target` function
is called.

## Rule Details

### Examples of **incorrect** code for this rule

```html
<!-- Arrow function returning .$el -->
<gl-popover :target="() => $refs.myButton.$el" />

<!-- Arrow function with explicit this -->
<gl-tooltip :target="() => this.$refs.myButton.$el" />

<!-- Function expression -->
<gl-popover :target="function() { return $refs.myButton.$el; }" />

<!-- PascalCase component names -->
<GlPopover :target="() => $refs.myButton.$el" />
<GlTooltip :target="() => $refs.myButton.$el" />

<!-- v-bind: long-form syntax -->
<gl-popover v-bind:target="() => $refs.myButton.$el" />

<!-- Detection is not limited to `$refs`: any callback returning a
     component instance's `.$el` is flagged -->
<gl-popover :target="() => this.myButton.$el" />
```

### Examples of **correct** code for this rule

```html
<!-- Plain ref (no function) — always fine -->
<gl-popover :target="$refs.myButton" />

<!-- Arrow function without .$el — already correct -->
<gl-popover :target="() => $refs.myButton" />

<!-- DOM query — no .$el needed -->
<gl-popover :target="() => document.querySelector('#my-button')" />

<!-- .:target on an unrelated component — not flagged -->
<my-component :target="() => $refs.foo.$el" />
```

## Options

Nothing

## Related rules

- [`vue-no-data-toggle`](./vue-no-data-toggle.md)

## When Not To Use It

If your project is still using a version of `@gitlab/ui` that has **not** yet received the
companion fix (design.gitlab.com!6006), enabling this rule as `error` may cause runtime
issues. In that case, land the rule as `warn` or keep it off until the updated `@gitlab/ui`
version is deployed.