{"id":27098807,"url":"https://github.com/eurusik/ngx-autofocus","last_synced_at":"2026-01-23T16:35:35.923Z","repository":{"id":292759545,"uuid":"961292329","full_name":"eurusik/ngx-autofocus","owner":"eurusik","description":"Intelligent autofocus for Angular that works everywhere — even on iOS!","archived":false,"fork":false,"pushed_at":"2025-04-06T15:23:28.000Z","size":262,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-26T02:30:57.701Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ngx-autofocus.vercel.app","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/eurusik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2025-04-06T07:35:50.000Z","updated_at":"2025-04-06T17:11:54.000Z","dependencies_parsed_at":"2025-05-12T02:44:47.381Z","dependency_job_id":null,"html_url":"https://github.com/eurusik/ngx-autofocus","commit_stats":null,"previous_names":["eurusik/ngx-autofocus"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eurusik/ngx-autofocus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eurusik%2Fngx-autofocus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eurusik%2Fngx-autofocus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eurusik%2Fngx-autofocus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eurusik%2Fngx-autofocus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eurusik","download_url":"https://codeload.github.com/eurusik/ngx-autofocus/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eurusik%2Fngx-autofocus/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28695575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T15:57:05.722Z","status":"ssl_error","status_checked_at":"2026-01-23T15:56:27.656Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2025-04-06T12:01:00.645Z","updated_at":"2026-01-23T16:35:35.913Z","avatar_url":"https://github.com/eurusik.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Directives"],"readme":"# 🔍 NgxAutofocus\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/@eurusik/ngx-autofocus.svg\" alt=\"npm version\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/dm/@eurusik/ngx-autofocus.svg\" alt=\"npm downloads\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/license/eurusik/ngx-autofocus.svg\" alt=\"license\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eIntelligent autofocus for Angular that works everywhere — even on iOS!\u003c/b\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://ngx-autofocus.vercel.app/\" target=\"_blank\"\u003e📱 View Live Demo\u003c/a\u003e\n\u003c/p\u003e\n\n## ✨ Features\n\n- 🚀 **Simple to use** — just add the `ngxAutofocus` directive to any element\n- 📱 **iOS Support** — special iOS handler improves focus behavior (note: due to WebKit limitations, keyboard may require a tap to appear)\n- 🎯 **Smart focusing** — supports conditional focus and dynamic content\n- 🎭 **Animation aware** — automatically waits for animations to complete\n- ⚡ **Synchronous mode** — optional immediate focus without delays\n- 🧪 **Fully tested** — comprehensive test coverage for reliability\n\n## 📦 Installation\n\n```bash\nnpm install @eurusik/ngx-autofocus --save\n```\n\nor\n\n```bash\nyarn add @eurusik/ngx-autofocus\n```\n\n### Compatibility\n\nThis library is compatible with Angular 18.0.0 and above. It uses modern Angular features including the standalone components architecture and the new Input API introduced in Angular 18.\n\n## 🚀 Quick Start\n\n### Import the directive\n\n```typescript\nimport { NgxAutofocusDirective } from '@eurusik/ngx-autofocus';\n\n@Component({\n  // ...\n  standalone: true,\n  imports: [NgxAutofocusDirective],\n})\nexport class YourComponent {}\n```\n\n### Basic usage\n\n```html\n\u003c!-- Simple autofocus --\u003e\n\u003cinput ngxAutofocus\u003e\n\n\u003c!-- Conditional autofocus --\u003e\n\u003cinput [ngxAutofocus]=\"shouldFocus\"\u003e\n```\n\n## 🔧 Advanced Features\n\n### Focus Handlers API\n\nNgxAutofocus comes with three specialized handlers to manage different focus scenarios:\n\n#### 1. NgxDefaultAutofocusHandler\n\nThe default handler provides smart focus with animation awareness:\n\n- Automatically waits for Angular animations to complete\n- Uses a race condition between animation detection and timeout\n- Runs outside Angular zone for better performance\n\n```typescript\nimport { NGX_AUTOFOCUS_HANDLER, NgxDefaultAutofocusHandler } from '@eurusik/ngx-autofocus';\n\n@Component({\n  // ...\n  providers: [\n    {\n      provide: NGX_AUTOFOCUS_HANDLER,\n      useClass: NgxDefaultAutofocusHandler\n    }\n  ]\n})\n```\n\n#### 2. NgxIosAutofocusHandler\n\nSpecialized handler for iOS devices that solves common focus issues:\n\n- Creates a temporary invisible input to trigger the keyboard\n- Copies relevant attributes from the original input\n- Uses precise timing to overcome iOS focus limitations\n- Properly cleans up temporary elements\n\nThis handler is automatically used when an iOS device is detected.\n\n#### 3. NgxSynchronousAutofocusHandler\n\nSimplified handler for immediate focus without delays:\n\n```typescript\nimport { NGX_AUTOFOCUS_HANDLER, NgxSynchronousAutofocusHandler } from '@eurusik/ngx-autofocus';\n\n@Component({\n  // ...\n  providers: [\n    {\n      provide: NGX_AUTOFOCUS_HANDLER,\n      useClass: NgxSynchronousAutofocusHandler\n    }\n  ]\n})\n```\n\n### Custom Focus Options\n\nConfigure focus behavior with custom options:\n\n```typescript\nimport { NGX_AUTOFOCUS_OPTIONS } from '@eurusik/ngx-autofocus';\n\n@Component({\n  // ...\n  providers: [\n    {\n      provide: NGX_AUTOFOCUS_OPTIONS,\n      useValue: { \n        delay: 300,             // Delay in ms before focusing\n        preventScroll: true,    // Prevent automatic scrolling\n        query: 'input, button'  // Custom query for finding focusable elements\n      }\n    }\n  ]\n})\n```\n\n### Creating Custom Handlers\n\nYou can create your own focus handler by extending the `AbstractNgxAutofocusHandler` class:\n\n```typescript\nimport { ElementRef } from '@angular/core';\nimport { AbstractNgxAutofocusHandler, NgxAutofocusOptions } from '@eurusik/ngx-autofocus';\n\nexport class MyCustomHandler extends AbstractNgxAutofocusHandler {\n  constructor(\n    protected override readonly el: ElementRef\u003cHTMLElement\u003e,\n    protected override readonly options: NgxAutofocusOptions\n  ) {\n    super(el, options);\n  }\n\n  public setFocus(): void {\n    // Your custom focus implementation\n    console.log('Custom focus logic');\n    this.element.focus({ preventScroll: this.options.preventScroll });\n  }\n}\n```\n\n## 🌟 Demo\n\n### Online Demo\n\nView the live demo at [https://ngx-autofocus.vercel.app/](https://ngx-autofocus.vercel.app/)\n\n\u003e **Note for iOS users**: Due to a [WebKit limitation](https://bugs.webkit.org/show_bug.cgi?id=243416), programmatic focus on iOS doesn't automatically trigger the keyboard. Elements will receive focus correctly, but you'll need to tap once to make the keyboard appear. Apple is working on fixing this in future iOS versions.\n\n### Local Development\n\nThe project includes a demonstration application showcasing various NgxAutofocus scenarios:\n\n```bash\ngit clone https://github.com/eurusik/ngx-autofocus.git\ncd ngx-autofocus\nnpm install\nnpm start\n```\n\nOpen your browser and navigate to `http://localhost:4200/`.\n\n### iOS Demo\n\nThe demo includes a special iOS simulation mode that demonstrates how the iOS handler works:\n\n- Shows the temporary input element creation process\n- Visualizes the focus sequence\n- Allows testing iOS behavior on non-iOS devices\n\n## 🧪 Testing\n\nThe directive has comprehensive test coverage to ensure reliability across different scenarios:\n\n```bash\nnpm test\n```\n\n## 🤝 Contributing\n\nContributions are welcome! Please create an issue or pull request on GitHub: https://github.com/eurusik/ngx-autofocus\n\n## 📄 License\n\nMIT\n\n## 🤝 Contributing\n\nContributions are welcome! Please create an issue or pull request on GitHub.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feurusik%2Fngx-autofocus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feurusik%2Fngx-autofocus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feurusik%2Fngx-autofocus/lists"}