{"id":19226300,"url":"https://github.com/qonto/ember-autofocus-modifier","last_synced_at":"2025-04-05T17:04:30.676Z","repository":{"id":36070106,"uuid":"221189256","full_name":"qonto/ember-autofocus-modifier","owner":"qonto","description":"An {{autofocus}} modifier to use with Ember components.","archived":false,"fork":false,"pushed_at":"2024-10-28T14:21:22.000Z","size":5444,"stargazers_count":32,"open_issues_count":5,"forks_count":8,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-29T16:04:41.562Z","etag":null,"topics":["ember","ember-addon"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qonto.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-12T10:19:11.000Z","updated_at":"2024-10-31T17:40:15.000Z","dependencies_parsed_at":"2023-09-26T17:42:13.451Z","dependency_job_id":"2b55f902-2ab0-4126-84d2-f01fbfde1b90","html_url":"https://github.com/qonto/ember-autofocus-modifier","commit_stats":{"total_commits":278,"total_committers":17,"mean_commits":"16.352941176470587","dds":0.5539568345323741,"last_synced_commit":"2cb81c3e7e3bb13f7f25781e152ded07fd0c33af"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qonto%2Fember-autofocus-modifier","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qonto%2Fember-autofocus-modifier/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qonto%2Fember-autofocus-modifier/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qonto%2Fember-autofocus-modifier/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qonto","download_url":"https://codeload.github.com/qonto/ember-autofocus-modifier/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369953,"owners_count":20927928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember","ember-addon"],"created_at":"2024-11-09T15:18:09.070Z","updated_at":"2025-04-05T17:04:30.636Z","avatar_url":"https://github.com/qonto.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![ember-autofocus-modifier-illustration](https://user-images.githubusercontent.com/15218861/189953191-49028e3e-6627-4e3d-9945-70800a6f3d0b.svg)\n\n# ember-autofocus-modifier\n\nYour ember component has just been rendered. Have you ever wanted to focus an\nelement in the DOM right after that? Like focusing this lonely input on your\npage? Or like focusing a full-screen modal's close button?\n\nThis package wraps a modifier to autofocus an element in the DOM. It works for\ninputs and for other elements.\n\nAs an alternative to installing this package, you might want to consider using\n[this snippet](https://github.com/qonto/ember-autofocus-modifier/blob/v0.0.1/addon/modifiers/autofocus.js).\n\n## Usage\n\nBy default, it will search for the first non-disabled input in the dom node that it has been attached to.\n\nYou can specify a custom selector to target other element as the first positional parameter.\n\nIf no child is found, then it will try to focus the element itself.\n\n## Examples\n\n#### To set the autofocus to an ember component:\n\n```handlebars\n\u003cMyComponent {{autofocus}} /\u003e\n```\n\n#### To set the autofocus to a native html element:\n\n```handlebars\n\u003cinput {{autofocus}} /\u003e\n```\n\n#### To set the autofocus to the first focusable input of an html container:\n\nHere, `#input-2` will be focused as `input-1` is disabled:\n\n```handlebars\n\u003cform {{autofocus}}\u003e\n  \u003cinput id=\"input-1\" disabled=\"disabled\" /\u003e\n  \u003cinput id=\"input-2\" /\u003e\n  \u003cbutton type=\"submit\" /\u003e\n\u003c/form\u003e\n```\n\n#### To set the autofocus to something else than an input in a node's children:\n\nHere, the autofocus will be applied to the button\n\n```handlebars\n\u003cform {{autofocus \"button\"}}\u003e\n  \u003cinput /\u003e\n  \u003cinput /\u003e\n  \u003cbutton type=\"submit\" /\u003e\n\u003c/form\u003e\n```\n\n#### If the autofocus is applied multiple times, the latest element will be auto-focused:\n\nHere, the autofocus will be applied to the button\n\n```handlebars\n\u003cform\u003e\n  \u003cinput {{autofocus}} /\u003e\n  \u003cinput {{autofocus}} /\u003e\n  \u003cbutton {{autofocus}} type=\"submit\" /\u003e\n\u003c/form\u003e\n```\n\n## Installation\n\n```\nyarn add -D ember-autofocus-modifier\n```\n\nor\n\n```\nnpm install --save-dev ember-autofocus-modifier\n```\n\n## Compatibility\n\n- Ember.js v3.28 or above\n- Ember CLI v3.28 or above\n- Node.js v18 or above\n- TypeScript v5.0 or above\n\n## TypeScript usage\n\nThe `autofocus` helper has proper [Glint](https://github.com/typed-ember/glint) types, which allow you to get strict type checking in your templates when using TypeScript.\n\nUnless you are using [strict mode](http://emberjs.github.io/rfcs/0496-handlebars-strict-mode.html) templates (via [first class component templates](http://emberjs.github.io/rfcs/0779-first-class-component-templates.html)),\nyou need to import the addon's Glint template registry entries as described in the [Using Addons](https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons#using-glint-enabled-addons) documentation:\n\n```ts\n// e.g. types/glint.d.ts\nimport \"@glint/environment-ember-loose\";\nimport type AutofocusRegistry from \"ember-autofocus-modifier/template-registry\";\n\ndeclare module \"@glint/environment-ember-loose/registry\" {\n  export default interface Registry\n    extends AutofocusRegistry /* other addon registries */ {\n    // local entries\n  }\n}\n```\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqonto%2Fember-autofocus-modifier","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqonto%2Fember-autofocus-modifier","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqonto%2Fember-autofocus-modifier/lists"}