Apply HTML <label for...> to <Select ...> (Not a Bug, but an Annoyance)

ar4hc commented 1 year ago

I have something like this,

<label for="custom-input" class="px-3 block uppercase">Custom</label>
 <Select
          id="custom"
          inputAttributes={{ id: 'custom-input' }}
<!--  .... -->

and it works, but my IDE/Linter complains about "invalid id reference", as it can' find the id hidden in the Component.

Any idea how to make this work...?

It's not urgent...

rob-balfre commented 1 year ago

@ar4hc don't use inputAttributes for setting id. You only need id https://svelte.dev/repl/1ed4b51df582400a8dfbd1baa13e9667?version=3.58.0

Hopefully that stops your IDE complaining.

See props docs... https://github.com/rob-balfre/svelte-select#props

ar4hc commented 1 year ago

Nope... :(

tried it like

     <label for="custom-input">Custom</label>
     <Select id="custom-input"

no inputAttributes={{ id: 'custom-input' }}.

It still works in the browser.

I assume IntelliJ tries to be "smart"(tm) and seems to expect a tag from a short whitelist, like

Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>.

from mdn

or a component it "knows" somehow, and doesn't want the custom Selecttag...

I found a bug in Intellij, about one year old, that is similar.

Nothing that can be done here, isn't it...?

But thank you for your time.

rob-balfre / svelte-select

Apply HTML <label for...> to <Select ...> (Not a Bug, but an Annoyance) #577