Skip to content
This repository has been archived by the owner on Jan 11, 2023. It is now read-only.

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

Open
onderbakirtas opened this issue Mar 20, 2021 · 2 comments
Open

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

onderbakirtas opened this issue Mar 20, 2021 · 2 comments

Comments

@onderbakirtas
Copy link

onderbakirtas commented Mar 20, 2021

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
Copy link
Member

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
Copy link
Author

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?

# for free to subscribe to this conversation on GitHub. Already have an account? #.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants