Hi all,
Ember.js newby here.
I have been working with TypeScript mostly, and I am starting a dummy todo project to get the hang of ember.js with TypeScript. I read the recommended way to typecheck templates is using Glint, which has been working fairly good so far.
I am having a strange issue when trying to define a modifier to be able to autofocus a text input when it is rendered in the screen. This is my code so far:
Todo.hsb - component where I call the modifier, which is called autofocus
<li>
{{#if this.isEditing}}
<form {{on 'submit' this.edit}}>
<label>
<Input @value={{this.text}} {{autofocus}} />
</label>
<button type='submit'>Save</button>
<button type='button' {{on 'click' this.toggleEdit}}>Cancel</button>
</form>
{{else}}
{{@todo.text}}
<button type='button' {{on 'click' this.toggleEdit}}>Edit</button>
<button type='button' {{on 'click' this.remove}}>Delete</button>
{{/if}}
</li>
autofocus.ts - modifier for autofocus
import { modifier } from 'ember-modifier';
interface AutofocusSignature {
Element: HTMLElement;
}
const autofocus = modifier<AutofocusSignature>((element: HTMLElement) => {
element.focus();
});
export default autofocus;
declare module '@glint/environment-ember-loose/registry' {
export default interface Registry {
autofocus: typeof autofocus;
}
}
Error that I am getting when running glint for typechecking:
app/components/todo.hbs:5:39 - error TS2769: The given value does not appear to be usable as a component, modifier or helper.
No overload matches this call.
The last overload gave the following error.
Argument of type 'FunctionBasedModifier<{ Element: HTMLElement; Args: { Named: EmptyObject; Positional: []; }; }>' is not assignable to parameter of type '(...positional: unknown[]) => unknown'.
5 <Input @value={{this.text}} {{autofocus}} />
~~~~~~~~~
node_modules/@glint/environment-ember-loose/-private/dsl/index.d.ts:33:25
33 export declare function resolve<P extends unknown[], T>(
~~~~~~~
The last overload is declared here.
error Command failed with exit code 1.
I have been trying to play around with AutofocusSignature Args, like setting Positional to unknown[], but it doesn’t seem to be helping.
Worth nothing that the modifier is working on my website, so it is only glint typechecking that is throwing the error.
Appreciate any help or ideas.
Cheers!
Alejandro
