Using target or some other method to open custom component links in a new window

I want users to be able to open links from a custom component. Here's a minimal example, that doesn't work, reasonably.

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="react"></div>
<script type="text/babel">
  const ConnectedComponent = Retool.connectReactComponent(_ => <a href="https://google.com">Google</a>)
  const container = document.getElementById('react')
  const root = ReactDOM.createRoot(container)
  root.render(<ConnectedComponent />)
</script>

This doesn't work because the custom component is in an iframe, and the link tries to open google in an iframe, and Google does not like being opened in an iframe.

But if I add target="_blank" or target="_parent" to that <a> tag, the click gets swallowed as if it does not exist. I can right click the link and say "open in new tab," but I can't open the link by clicking.

I answered my own question: to get target="_parent" to work you need to give the component the "Top level navigation" permission, and to get target="_blank" to work you need to give the component the "Popups" permission.

2 Likes