Svelte actions (use:action) does not work as intended.

[onderbakirtas]

trafficstars

Describe the bug As in the title, use:action directive does not work as described in the docs, at least in my case. I want my input to be focused when it's loaded, this works in Svelte app but does not work in Sapper.

Logs Log image 1 Log image 2

To Reproduce Create an input element with use:focus directive. The focus method have following code:

function focus(node) {
    node.focus();
    console.log('node: ', node)
    console.log('activeElement: ', window.document.activeElement)
    console.log('equality: ', node === document.activeElement)
    console.log('window: ', window)
  }

Expected behavior The input should have focus.

Information about your Sapper Installation:

• The output of npx envinfo --system --npmPackages svelte,sapper,rollup,webpack --binaries --browsers

  System:  
  OS: Windows 10 10.0.19042
  CPU: (12) x64 AMD Ryzen 5 1600 Six-Core Processor 
  Memory: 10.79 GB / 15.94 GB 
  Binaries: 
  Node: 14.15.1 - C:\Program Files\nodejs\node.EXE
  Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
  npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers: 
  Edge: Spartan (44.19041.423.0),
  Chromium (89.0.774.57)
  Internet Explorer: 11.0.19041.1 

• Your browser I'm using Chrome and Firefox, both latest versions.

• Your hosting environment (i.e. Local, GCP/AWS/Azure, Vercel/Begin, etc...) Currently it's local environment.

• If it is an exported (npm run export) or dynamic application No, it's working on local via npm run dev.

Severity Annoying, also it is needed since autofocus attribute on input element does not work either.

[PatrickG]

Probably because of this line

A timeout should fix it.

function focus(node) {
  setTimeout(() => {
    node.focus();
    console.log('node: ', node)
    console.log('activeElement: ', window.document.activeElement)
    console.log('equality: ', node === document.activeElement)
    console.log('window: ', window)
  }, 0);
}

[onderbakirtas]

Probably because of this line

A timeout should fix it.

function focus(node) {
  setTimeout(() => {
    node.focus();
    console.log('node: ', node)
    console.log('activeElement: ', window.document.activeElement)
    console.log('equality: ', node === document.activeElement)
    console.log('window: ', window)
  }, 0);
}

Thanks for taking your time to investigate the issue. Yeah, probably since sometimes with a hard refresh, I could see a glimpse of focus on the input. Should it be fixed by framework or we need to accept this and move on?