Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't set type for input tag. #620

Closed
stalkerg opened this issue Jun 6, 2017 · 6 comments · Fixed by #630
Closed

Can't set type for input tag. #620

stalkerg opened this issue Jun 6, 2017 · 6 comments · Fixed by #630

Comments

@stalkerg
Copy link
Contributor

stalkerg commented Jun 6, 2017

I am tring to generate input tag:

<input type="{{cond.field_type}}" placeholder="constant"
       value="{{cond.const}}" on:change="setCondConst(index, this)">

but svelte plugin output:

'svelte' plugin: 'type must be a static attribute
@Conduitry
Copy link
Member

type needs to be static because in some cases fairly different code is generated depending on the input's type. Allowing type to vary would result in all that logic being pushed to the generated code. In addition to making the runtime code more complicated, it would also make the compiler code more complicated. The two versions of the code (doing different things based on the type at compile time, and doing different things based on the type at runtime) would have to be kept in sync. It seems to be a much larger surface for bugs, with not a lot of benefit. Rich may feel differently, but I doubt this is something we want to pursue.

If you need this sort of functionality, I would recommend having multiple {{#if}}...{{else}}...{{/if}} blocks around different instances of the <input> tag for all of the different types you need to support.

@Rich-Harris
Copy link
Member

I think it only needs to be static if there's a two-way binding, because the change handler is dependent on the input type. In this case, I reckon it's fine for it to be dynamic.

The error is being raised here because of this block — note the TODO comment (mea culpa). That check should probably be more specific and happen in the validation phase.

Rich-Harris added a commit that referenced this issue Jun 12, 2017
only enforce static type if input is bound
@Rich-Harris
Copy link
Member

This is fixed in 1.22.3, thanks

@ayZagen
Copy link

ayZagen commented Jul 16, 2019

Is it feasible to make type attribute to be dynamic ? That would be great for having dynamic inputs like password fields.

For ex:

<input
  type={ passwordVisible ? 'text' : 'password'}
  bind:value={data.loginForm.password} />
<span on:click={() => passwordVisible = !passwordVisible} class="fa fa-fw {passwordVisible ? 'fa-eye-slash' : 'fa-eye' }"></span>

EDIT: Using svelte 3.6.7

@Conduitry
Copy link
Member

I had thought there was an open issue already for that, but I can't find it right now. Because we don't want stuff to be completely dynamic at runtime, there'd be some restrictions on what you can do. Inputs with dynamic type would always be treated as text-type inputs - i.e., only have value bindings, which are updated by listening for the input event. I don't know whether those limitations would lead to too much confusion.

@stalkerg
Copy link
Contributor Author

I don't know whether those limitations would lead to too much confusion.

It significant confusing and it should be in the documentation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants