TypeForm Embed Grabs Focus

[normdoow]

trafficstars

Here is a notion page I am testing with: 130868ef58d949f4add8cf1da983fc16

The page will jump down to give the typeform iframe focus once it loads. Not sure what the best way to handle this is. Seems like there is no way we can take focus away from the iframe itself since it is controlled by typeform (maybe I'm wrong on this).

One solution I was playing around with was trying to give focus to another element after the iframe loads.

content = (
            <>
              <input style={{position: 'absolute', marginTop: -500}} ref={ref} />
              <iframe
                className='notion-asset-object-fit'
                style={assetStyle}
                src={src}
                title={`iframe ${block.type}`}
                frameBorder='0'
                // TODO: is this sandbox necessary?
                // sandbox='allow-scripts allow-popups allow-top-navigation-by-user-activation allow-forms allow-same-origin'
                allowFullScreen
                // this is important for perf but react's TS definitions don't seem to like it
                loading='lazy'
                onLoad={() => setTimeout(() => ref.current.focus(), 800)}
              />
            </>
          )

This is in components -> asset.tsx

But this is not a great solution because the focus time could depend on the load time or network.

[normdoow]

Probably a better solution (I think this is what the Notion web app does) is hide the embed until the user scrolls down to it.