{"id":24266907,"url":"https://github.com/tolemac/tolefocus","last_synced_at":"2026-05-07T20:39:27.215Z","repository":{"id":57377804,"uuid":"78798102","full_name":"tolemac/ToleFocus","owner":"tolemac","description":"Framework Agnostic Focus Manager","archived":false,"fork":false,"pushed_at":"2017-05-19T06:33:01.000Z","size":47,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-16T00:05:47.212Z","etag":null,"topics":["autofocus","focus","javascript","manager","mutation-observer","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tolemac.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-12T23:59:47.000Z","updated_at":"2017-02-24T09:43:08.000Z","dependencies_parsed_at":"2022-09-19T03:30:16.996Z","dependency_job_id":null,"html_url":"https://github.com/tolemac/ToleFocus","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tolemac%2FToleFocus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tolemac%2FToleFocus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tolemac%2FToleFocus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tolemac%2FToleFocus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tolemac","download_url":"https://codeload.github.com/tolemac/ToleFocus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241952035,"owners_count":20047918,"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":["autofocus","focus","javascript","manager","mutation-observer","typescript"],"created_at":"2025-01-15T11:49:57.202Z","updated_at":"2026-05-07T20:39:27.173Z","avatar_url":"https://github.com/tolemac.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ToleFocus\n[![NPM version](https://badge.fury.io/js/tolefocus.svg)](http://badge.fury.io/js/tolefocus) [![Dependency Status](https://david-dm.org/tolemac/tolefocus.svg)](https://david-dm.org/tolemac/tolefocus) [![devDependency Status](https://david-dm.org/tolemac/tolefocus/dev-status.svg)](https://david-dm.org/tolemac/tolefocus#info=devDependencies)\n\u003e JavaScript Framework agnostic Focus Manager coded in TypeScript\n\nToleFocus is a small library to manage focus on JavaScript web applications. ToleFocus use ES6 methods, like `array.findIndex`, and require some polyfill like [core-js](https://github.com/zloirock/core-js) in order to work in old browsers, like IE.\n\nToleFocus is highly inspired on [Angular Focus Manager](https://github.com/obogo/angular-focusmanager) coded by [Rob Tylor](https://github.com/roboncode).\n\n## Installation\n\n````\nnpm install tolefocus --save\n````\n\n## Usage\n\nTo enable the focus manager you have to import `focusManager` from `tolefocus` module and call `enable` method.\n\n```` javascript\nimport {focusManager} from \"tolefocus\";\nfocusManager.enable();\n````\n\nThis load the content of `body` tag searching for ToleFocus attributes.\n\nYou can enable the built in DOM observer witch use [MutationObserver](https://developer.mozilla.org/es/docs/Web/API/MutationObserver) in order to detect the DOM changes.\n\n\n```` javascript\nimport {focusManager, focusObserver} from \"tolefocus\";\nfocusManager.enable();\nfocusObserver.enable();\n````\n\nToleFocus handles by default the TAB key in the common focusables controls and sends focus to the next or previous control.\n\n### Setting focus order\n\nYou can set the focus order:\n\n```` html\n\u003cinput /\u003e \u003c!-- first control in focus order --\u003e\n\u003cinput /\u003e \u003c!-- third control in focus order --\u003e\n\u003cinput focus-order=\"1\" /\u003e \u003c!-- second control in focus order --\u003e\n````\n\nFocus order is zero based, you can set negative focus order to any element, the negative focus order are pushed to the first positions.\n\n```` html\n\u003cinput id='i1'/\u003e \u003c!-- second order --\u003e\n\u003cinput id='i2' focus-order='-2' /\u003e \u003c!-- first order --\u003e\n\u003cinput id='i3' /\u003e \u003c!-- third order --\u003e\n\u003cinput id='i4' focus-order='2' /\u003e \u003c!-- fourth order --\u003e\n\u003cinput id='i5' /\u003e \u003c!-- fifth order --\u003e\n\u003cinput id='i6' /\u003e \u003c!-- seventh order --\u003e\n\u003cinput id='i7' focus-order='4' /\u003e \u003c!-- sixth order --\u003e\n\u003cinput id='i8' /\u003e \u003c!-- eighth order --\u003e\n````\n\n### Focus groups\n\nYou can create focus groups where each element can to have his own focus-order in the group.\n\n```` html\n\u003cdiv focus-group\u003e\n    \u003cinput /\u003e\n    \u003cdiv focus-group focus-order=\"1\"\u003e\n        \u003cinput /\u003e \n        \u003cinput /\u003e \n        \u003cinput /\u003e\n    \u003c/div\u003e\n    \u003cinput /\u003e\n    \u003cinput focus-order=\"2\" /\u003e\n\u003c/div\u003e\n\u003cdiv focus-group focus-order=\"1\"\u003e\n    \u003cinput /\u003e \n    \u003cinput /\u003e \n    \u003cinput /\u003e\n\u003c/div\u003e\n````\n\n### Focus loopback control\n\nYou can control the group loopback, you can set the head and tail behaivor. When behaivor is \"stop\" the focus doesn't go to the next element, the foucus stops in the last or first element. When behaivor is \"loop\" the focus go from last to first element in the group or from the first to the end element.\n\n```` html\n\u003cdiv focus-group=\"loop\"\u003e \u003c!-- head and tail behaivor to \"loop\". The focus from first to last or reverse. --\u003e\n    \u003cinput /\u003e \n    \u003cinput /\u003e \n    \u003cinput /\u003e\n\u003c/div\u003e\n\u003cdiv focus-group=\"stop\"\u003e \u003c!-- head and tail behaivor to \"stop\". The focus stops in the last or the first element --\u003e\n    \u003cinput /\u003e \n    \u003cinput /\u003e \n    \u003cinput /\u003e\n\u003c/div\u003e\n\u003cdiv focus-group=\"stop loop\"\u003e \u003c!-- head behaivor set to stop and tail behaivor is \"loop\". The focus stops in the first element and will go from the last to the first --\u003e\n    \u003cinput /\u003e \n    \u003cinput /\u003e \n    \u003cinput /\u003e\n\u003c/div\u003e\n````\n\n### Non-selectable elements\n\nYou can send focus to other controls like `div` or `spans`, you have to set `focus-order` attribute.\n\n```` html\n\u003cdiv focus-order\u003e\n\u003c/di\u003e\n\u003cinput /\u003e\n\u003cdiv focus-order=\"2\"\u003e\n\u003c/di\u003e\n````\n\n### Autofocus\n\nYou can set an element as autofocus to set focus on it automatically. If you have the `focusObserver` enabled the element will focus when it's added to the DOM.\n\n```` html\n\u003cinput /\u003e\n\u003cinput /\u003e\n\u003cinput autofocus /\u003e \u003c!-- gets the focus automatically --\u003e\n````\n\nIf you want to hide a element and get focused when it becomes visible you can set `observe` value to `autofocus` attribute.\n\n```` html\n\u003cinput /\u003e\n\u003cinput /\u003e\n\u003cinput autofocus=\"observe\" style=\"display: none\" /\u003e  \u003c!-- gets the focus automatically when become visible --\u003e\n\u003cbutton onclick=\"showHiddenInput()\"\u003eShow\u003c/button\u003e\n````\n\n### Custom focusable elements\n\nYou can add selectors to handle focusable elements, for example you can add elements with class `select2-selection` as focusable elements, then `tolefocus` detect this elements as focusables.\n\n````javascript\nfocusManager.addCustomSelector(\".select2-selection\");\n````\n\n### Decide if element can get the focus\n\nWhen `tolefocus` going to set focus to an element, it ask if the element can get focus, by default it look if element is visible and not disabled this way:\n\n````javascript\n    const visible = element.offsetParent !== null;\n    const disable = !!element[\"disabled\"];\n    return visible \u0026\u0026 !disable;\n````\n\nYou can set a handler to decide if element can get focus, for example you can do that elements with class `select2-hidden-accessible` don't get the focus:\n\n````javascript\n    focusManager.setCanElementGetFocusHandler((element) =\u003e {\n        if (element.classList.contains(\"select2-hidden-accessible\")) {\n            return false;\n        }\n    });\n````\n\nIf handler don't return a value `tolefocus` decide via `visible` and `disabled`.\n\n#### Select2 support\n\n`Select2` hide the `\u003cselect\u003e` element and redirect focus to a self created `\u003cspan\u003e`, `tolefocus` can't detect this behivor without help, you have to mark the `span` as focusable and disable the select to get focus, you can do it this way:\n\n````javascript\n    // Select2 Focus management.\n    focusManager.addCustomSelector(\".select2-selection\");\n    focusManager.setCanElementGetFocusHandler((element) =\u003e {\n        if (element.classList.contains(\"select2-hidden-accessible\")) {\n            return false;\n        }\n    });\n    // end select2 Focus management\n\n    // Enable tolefocus.\n    focusManager.enable();\n    focusObserver.enable();\n````\n\n\n## SystemJS config\n\nTo use using SystemJS you have to map tolefocus to the distributed bundle:\n\n```` javascript\nSystem.config({\n    ...\n    ...\n    map: {\n      tolefocus: './node_modules/tolefocus/dist/bundles/tolefocus.bundle.umd.js'\n      ...\n      ...\n    },\n    ...\n    ...\n})\n````\n\n## Build\n\nPull request are welcome, to build it:\n\n````\ngit clone https://github.com/tolemac/tolefocus.git\ncd tolefocus\nnpm install\nnpm run build\n````\n\nYou can launch test suite using:\n\n````\nnpm run test\n````","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftolemac%2Ftolefocus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftolemac%2Ftolefocus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftolemac%2Ftolefocus/lists"}