# Javascript inject in Perspective... have fun

**URL:** <https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 28, 2022, 9:17am UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805 "2022-10-28T09:17:54Z")\
**Posts on this page:** 1\
**Showing post:** 18

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [May 22, 2025, 5:06am UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/18 "2025-05-22T05:06:36Z")

</div>

> [@nminchin](#):
>
> I presume the markdown hack works because the markdown component has to load first, presumably along with all the other componnets including the input field to focus, and it adds in the "img" component into the div after these have all loaded, so the onLoad script can then find the focus element and actually focus it. This seems to be the issue with other methods; the component to focus isn't actually loaded and/or displayed when the focus function is called.

Yup, you're exactly right, `runJavaScriptAsync` won't work for this 😕

> [@nminchin](#):
>
> How would I make it work on load?

I do have one other option: use the `events.target.lifecycle.onMount` callback of the Portal component.

> [@Musson Industrial's Embr-Periscope Module](https://forum.inductiveautomation.com/t/musson-industrials-embr-periscope-module/99047/20):
>
> Portal Component This update adds a Portal component, that uses React's createPortal to add children wherever you want them. This allows you to: Add elements inside existing components/views. Decouple the design time structure of your views from the runtime structure of the HTML elements. Develop re-usable views from the outside in. Examples Example, Basic Usage This example demonstrates how the elements of the Portal are added to the target. Example, Alert Information This example …

The Portal component doesn't have any documentation written yet... but, basically, it allows you to interact with a DOM element and directly insert children.

A side-feature is the `events.target.lifecycle` functions. Here, you can add functions that will run when the target `element` loads, unloads, or updates. For example:

```python
# element (DOM ID or arrow function that returns a reference to a node).
TextField
# events.target.lifecycle.onMount
(element) => element.focus()

```

This is pretty much the same thing as the Markdown component injection version though, just with a little more hand-holding.

Edit:  
There is an issue with the Portal component that hasn't been fixed yet; it doesn't listen for DOM changes after the first render. This means the Portal component must load _after_ the target.  
Until this issue is fixed, the Portal component doesn't have an advantage over the Markdown injection technique. Once it's fixed, it won't be load order sensitive.

---

_[View the full topic](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805)._