question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot specify tabindex with `tabindex="-1"` when working with typescript

See original GitHub issue

Describe the bug

Cannot specify tabindex with tabindex="-1" when working with typescript

I have to use tabindex={-1}

To Reproduce Create a typescript project with npx degit sveltejs/template && node scripts/setupNode.js

REplace you App.svelte with:

<script lang="ts">
	export let name: string
	let headingEl
</script>

<main>
	<h1 bind:this={headingEl} tabindex="-1">Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

and then

$ npm run validate

> svelte-app@1.0.0 validate /home/sas/devel/apps/mdn/mdn-svelte-tutorial/08-typescript-support
> svelte-check


Loading svelte-check in workspace: /home/sas/devel/apps/mdn/mdn-svelte-tutorial/08-typescript-support
Getting Svelte diagnostics...
====================================

/home/sas/devel/apps/mdn/mdn-svelte-tutorial/08-typescript-support/src/components/TodosStatus.svelte:25:45
Error: Type 'string' is not assignable to type 'number'. (ts)
eadingEl} tabindex="-1">{com

System (please complete the following information):

  • OS: Ubuntu 18.04
  • IDE: vscode
  • Plugin/Package: [e.g. svelte-check]

Additional context Add any other context about the problem here.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:13 (12 by maintainers)

github_iconTop GitHub Comments

1reaction
dummdidummcommented, Aug 7, 2020

You are not seeing it in VSCode yet because it’s not released yet. svelte-check gets it as part of the nightly builds, the VSCode extension is published “manually”. That will happen in a couple of days. If you don’t want to wait and are ok with some unstable builds, you can also use the Nightly Build of the extension.

1reaction
opensascommented, Aug 7, 2020

Great! I’ve just upgraded to svelte-check@1.0.9 and it works ok!

But I keep getting the error from vscode:

image

I tried Restarting Svelte Language server, and also restarting vscode itsefl, also issued an npm update, these are the libs I have:

$ npm list --depth 0
svelte-app@1.0.0 xxxxxxx
├── @rollup/plugin-commonjs@12.0.0
├── @rollup/plugin-node-resolve@8.4.0
├── @rollup/plugin-typescript@4.1.2
├── @tsconfig/svelte@1.0.8
├── rollup@2.23.0
├── rollup-plugin-livereload@1.3.0
├── rollup-plugin-svelte@5.2.3
├── rollup-plugin-terser@5.3.0
├── sirv-cli@0.4.6
├── svelte@3.24.1
├── svelte-check@1.0.9
├── svelte-preprocess@4.0.10
├── tslib@2.0.1
└── typescript@3.9.7

Is there some way to also apply this fix to vscode?

BTW, thanks a lot for your effort, it’s really awesome the work you are all doing, most issues are solved in a couple of hours, I bet there is no commercial support that gets even close to this response!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Is a tabIndex of -1 the same as having no ... - Stack Overflow
I can't add or remove the attribute in the way it's currently structured as it always is present, unless I can define whether...
Read more >
tabindex - HTML: HyperText Markup Language | MDN
The tabindex attribute must not be specified on <dialog> elements and should not be used on non-interactive content. If you set the tabindex ......
Read more >
Need to set tabIndex=0 to enable tab navigation
forwardRef for the first time and worked like a charm. Question. Does anyone know why using tabindex value greater than 0 is not...
Read more >
Control focus with tabindex - web.dev
If you're building custom interactive components, use tabindex to ensure that ... <button tabindex="-1">Can't reach me with the TAB key!
Read more >
How and when to use the tabindex attribute - bitsofcode
<div tabindex="-1">I'm a div</div>. If we were to navigate using the keyboard, we will see that it is not able to grab focus....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found