├── src
    ├── auto-complete-event.ts
    ├── index.ts
    ├── debounce.ts
    ├── auto-complete-element-define.ts
    ├── auto-complete-element.ts
    └── autocomplete.ts
├── CODEOWNERS
├── .gitignore
├── custom-elements-manifest.config.js
├── tsconfig.json
├── .github
    └── workflows
    │   ├── nodejs.yml
    │   └── publish.yml
├── .eslintrc.json
├── LICENSE
├── .devcontainer
    ├── devcontainer.json
    └── Dockerfile
├── web-test-runner.config.js
├── test
    ├── axe-test.js
    ├── validation-tests.js
    └── auto-complete-element.js
├── package.json
├── validator.js
├── custom-elements.json
├── examples
    └── index.html
└── README.md


/src/auto-complete-event.ts:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/CODEOWNERS:
--------------------------------------------------------------------------------
1 | * @github/primer-reviewers
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | node_modules/
3 | 
4 | # copied bundle if the example is run locally
5 | examples/dist/bundle.js
6 | 


--------------------------------------------------------------------------------
/custom-elements-manifest.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   packagejson: true,
3 |   globs: ['src/*-element.ts'],
4 |   plugins: [],
5 | }
6 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import {AutoCompleteElement} from './auto-complete-element-define.js'
2 | 
3 | export {AutoCompleteElement}
4 | export default AutoCompleteElement
5 | export * from './auto-complete-element-define.js'
6 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "module": "es2020",
 4 |     "target": "es2017",
 5 |     "strict": true,
 6 |     "moduleResolution": "node",
 7 |     "declaration": true,
 8 |     "outDir": "dist",
 9 |     "lib": ["dom", "dom.iterable", "es2020"],
10 |     "removeComments": true
11 |   },
12 |   "files": ["src/index.ts"]
13 | }
14 | 


--------------------------------------------------------------------------------
/src/debounce.ts:
--------------------------------------------------------------------------------
 1 | export default function debounce<T extends unknown[]>(
 2 |   callback: (...Rest: T) => unknown,
 3 |   wait = 0,
 4 | ): (...Rest: T) => void {
 5 |   let timeout: number
 6 |   return function (...Rest) {
 7 |     clearTimeout(timeout)
 8 |     timeout = window.setTimeout(() => {
 9 |       clearTimeout(timeout)
10 |       callback(...Rest)
11 |     }, wait)
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/.github/workflows/nodejs.yml:
--------------------------------------------------------------------------------
 1 | name: Node CI
 2 | 
 3 | on: [push, pull_request]
 4 | 
 5 | permissions:
 6 |   contents: read
 7 | 
 8 | jobs:
 9 |   build:
10 |     runs-on: ${{ matrix.os }}
11 | 
12 |     strategy:
13 |       fail-fast: false
14 |       matrix:
15 |         os: [ubuntu-latest, macos-latest]
16 | 
17 |     steps:
18 |       - uses: actions/checkout@v3
19 |       - name: Use Node.js 18.x
20 |         uses: actions/setup-node@v3
21 |         with:
22 |           node-version: 18.x
23 |       - name: npm install, build, and test
24 |         run: |
25 |           npm install
26 |           npm test
27 |         env:
28 |           CI: true
29 | 


--------------------------------------------------------------------------------
/.github/workflows/publish.yml:
--------------------------------------------------------------------------------
 1 | name: Publish
 2 | 
 3 | on:
 4 |   release:
 5 |     types: [created]
 6 | 
 7 | permissions:
 8 |   contents: read
 9 | 
10 | jobs:
11 |   publish-npm:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v3
15 |       - uses: actions/setup-node@v3
16 |         with:
17 |           node-version: 18
18 |           registry-url: https://registry.npmjs.org/
19 |           cache: npm
20 |       - run: npm ci
21 |       - run: npm test
22 |       - run: |
23 |           echo "Publishing $TAG_NAME"
24 |           npm version ${TAG_NAME} --git-tag-version=false
25 |         env:
26 |           TAG_NAME: ${{github.event.release.tag_name}}
27 |       - run: npm whoami; npm --ignore-scripts publish
28 |         env:
29 |           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
30 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "root": true,
 3 |   "extends": [
 4 |     "plugin:github/browser",
 5 |     "plugin:github/recommended",
 6 |     "plugin:github/typescript",
 7 |     "plugin:custom-elements/recommended"
 8 |   ],
 9 |   "rules": {
10 |     "custom-elements/tag-name-matches-class": [
11 |       "error",
12 |       {
13 |         "suffix": "Element"
14 |       }
15 |     ],
16 |     "custom-elements/define-tag-after-class-definition": "off",
17 |     "custom-elements/no-method-prefixed-with-on": "off",
18 |     "custom-elements/expose-class-on-global": "off",
19 |     "import/extensions": ["error", "always"],
20 |     "import/no-unresolved": "off"
21 |   },
22 |   "overrides": [
23 |     {
24 |       "files": "src/*-define.ts",
25 |       "rules": {
26 |         "@typescript-eslint/no-namespace": "off"
27 |       }
28 |     },
29 |     {
30 |       "files": "test/**/*.js",
31 |       "rules": {
32 |         "github/unescaped-html-literal": "off",
33 |         "github/no-inner-html": "off",
34 |         "i18n-text/no-en": "off"
35 |       },
36 |       "env": {
37 |         "mocha": true
38 |       }
39 |     }
40 |   ]
41 | }
42 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2018 GitHub, Inc.
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/src/auto-complete-element-define.ts:
--------------------------------------------------------------------------------
 1 | import {AutoCompleteElement} from './auto-complete-element.js'
 2 | 
 3 | const root = (typeof globalThis !== 'undefined' ? globalThis : window) as typeof window
 4 | try {
 5 |   // Lowercase C is here for backwards compat
 6 |   root.AutocompleteElement = root.AutoCompleteElement = AutoCompleteElement.define()
 7 | } catch (e: unknown) {
 8 |   if (
 9 |     !(root.DOMException && e instanceof DOMException && e.name === 'NotSupportedError') &&
10 |     !(e instanceof ReferenceError)
11 |   ) {
12 |     throw e
13 |   }
14 | }
15 | 
16 | type JSXBase = JSX.IntrinsicElements extends {span: unknown}
17 |   ? JSX.IntrinsicElements
18 |   : Record<string, Record<string, unknown>>
19 | declare global {
20 |   interface Window {
21 |     AutoCompleteElement: typeof AutoCompleteElement
22 |     AutocompleteElement: typeof AutoCompleteElement
23 |   }
24 |   interface HTMLElementTagNameMap {
25 |     'auto-complete': AutoCompleteElement
26 |   }
27 |   namespace JSX {
28 |     interface IntrinsicElements {
29 |       ['auto-complete']: JSXBase['span'] & Partial<Omit<AutoCompleteElement, keyof HTMLElement>>
30 |     }
31 |   }
32 | }
33 | 
34 | export default AutoCompleteElement
35 | export * from './auto-complete-element.js'
36 | 


--------------------------------------------------------------------------------
/.devcontainer/devcontainer.json:
--------------------------------------------------------------------------------
 1 | // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
 2 | // https://github.com/microsoft/vscode-dev-containers/tree/v0.222.0/containers/javascript-node
 3 | {
 4 | 	"name": "Node.js",
 5 | 	"build": {
 6 | 		"dockerfile": "Dockerfile",
 7 | 		// Update 'VARIANT' to pick a Node version: 16, 14, 12.
 8 | 		// Append -bullseye or -buster to pin to an OS version.
 9 | 		// Use -bullseye variants on local arm64/Apple Silicon.
10 | 		"args": { "VARIANT": "16" }
11 | 	},
12 | 
13 | 	// Set *default* container specific settings.json values on container create.
14 | 	"settings": {},
15 | 
16 | 	// Add the IDs of extensions you want installed when the container is created.
17 | 	"extensions": [
18 | 		"dbaeumer.vscode-eslint"
19 | 	],
20 | 
21 | 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
22 | 	// "forwardPorts": [],
23 | 
24 | 	// Use 'postCreateCommand' to run commands after the container is created.
25 | 	// "postCreateCommand": "yarn install",
26 | 
27 | 	// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
28 | 	"remoteUser": "node",
29 | 	"features": {
30 | 		"git": "latest",
31 | 		"github-cli": "latest"
32 | 	}
33 | }
34 | 


--------------------------------------------------------------------------------
/.devcontainer/Dockerfile:
--------------------------------------------------------------------------------
 1 | # See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.222.0/containers/javascript-node/.devcontainer/base.Dockerfile
 2 | 
 3 | # [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 16, 14, 12, 16-bullseye, 14-bullseye, 12-bullseye, 16-buster, 14-buster, 12-buster
 4 | ARG VARIANT="16"
 5 | FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
 6 | 
 7 | # [Optional] Uncomment this section to install additional OS packages.
 8 | # RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
 9 | #     && apt-get -y install --no-install-recommends <your-package-list-here>
10 | 
11 | # [Optional] Uncomment if you want to install an additional version of node using nvm
12 | # ARG EXTRA_NODE_VERSION=10
13 | # RUN su node -c "source/usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
14 | 
15 | # [Optional] Uncomment if you want to install more global node modules
16 | # RUN su node -c "npm install -g <your-package-list-here>" 
17 | 
18 | RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \ 
19 |   && echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list
20 | RUN apt-get update && apt-get -y install google-chrome-stable
21 | 


--------------------------------------------------------------------------------
/web-test-runner.config.js:
--------------------------------------------------------------------------------
 1 | import {esbuildPlugin} from '@web/dev-server-esbuild'
 2 | import {playwrightLauncher} from '@web/test-runner-playwright'
 3 | const browser = product =>
 4 |   playwrightLauncher({
 5 |     product,
 6 |   })
 7 | 
 8 | export default {
 9 |   files: ['test/*.js'],
10 |   nodeResolve: true,
11 |   plugins: [esbuildPlugin({ts: true, target: 'es2020'})],
12 |   browsers: [browser('chromium')],
13 |   testFramework: {
14 |     config: {
15 |       timeout: 1000,
16 |     },
17 |   },
18 | 
19 |   middleware: [
20 |     async ({request, response}, next) => {
21 |       const {method, url} = request
22 |       if (method === 'GET' && url.startsWith('/search?q=hub')) {
23 |         response.status = 200
24 |         response.body = `
25 |             <li role="option" data-autocomplete-value="first"><span>first</span></li>
26 |             <li role="option"><span>second</span></li>
27 |             <li role="option"><span>third</span></li>
28 |             <li role="option" aria-disabled="true"><span>fourth</span></li>
29 |             <li><a role="option" href="#hash">link</a></li>
30 |           `
31 |       } else if (method === 'GET' && url.startsWith('/noresults?q=none')) {
32 |         response.status = 200
33 |         response.body = `
34 |             <li role="presentation" aria-hidden="true" disabled data-no-result-found="true">No results found!</li>
35 |           `
36 |       }
37 |       await next()
38 |     },
39 |   ],
40 | }
41 | 


--------------------------------------------------------------------------------
/test/axe-test.js:
--------------------------------------------------------------------------------
 1 | import {assert, chai} from '@open-wc/testing'
 2 | import 'axe-core'
 3 | import autoCompleteRulesBuilder from '../validator.js'
 4 | chai.config.truncateThreshold = Infinity
 5 | 
 6 | const autoCompleteRules = autoCompleteRulesBuilder()
 7 | 
 8 | function makeDOMNode(htmlString) {
 9 |   const parser = new DOMParser()
10 |   return parser.parseFromString(htmlString, 'text/html')
11 | }
12 | 
13 | function getAxeResult(htmlString) {
14 |   const {axe} = globalThis
15 |   axe.reset()
16 |   axe.configure(autoCompleteRules)
17 |   const document = makeDOMNode(htmlString)
18 |   const justTheBody = document.querySelector('body')
19 |   return axe.run(justTheBody)
20 | }
21 | 
22 | const documentString = `
23 |   <body>
24 |     <main>
25 |       <h1>My Example Auto Complete Element</h1>
26 |       <label for="example-input-field">My Auto Complete Label</label>
27 |       <auto-complete src="/search" for="popup" data-autoselect="true">
28 |         <input name="example" type="text" id="example-input-field">
29 |         <button id="example-input-field-clear">x</button>
30 |         <ul id="popup"></ul>
31 |         <div id="popup-feedback"></div>
32 |       </auto-complete>
33 |     </main>
34 |   <body>
35 | `
36 | 
37 | describe('axe accessibility run', function () {
38 |   describe('correct usage', function () {
39 |     describe('does not block standard axe checks', function () {
40 |       it('axe check passes', async function () {
41 |         const result = await getAxeResult(documentString)
42 |         assert.lengthOf(result.violations, 0)
43 |       })
44 |     })
45 |   })
46 | })
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@github/auto-complete-element",
 3 |   "version": "3.2.2",
 4 |   "description": "Auto-complete input values from server results",
 5 |   "repository": "github/auto-complete-element",
 6 |   "type": "module",
 7 |   "main": "dist/index.js",
 8 |   "module": "dist/index.js",
 9 |   "types": "dist/index.d.ts",
10 |   "scripts": {
11 |     "clean": "rm -rf dist/",
12 |     "examples": "http-server -c-1 ./examples",
13 |     "lint": "eslint . --ext .js,.ts && tsc --noEmit",
14 |     "lint:fix": "npm run lint -- --fix",
15 |     "prebuild": "npm run clean && npm run lint && mkdir dist",
16 |     "bundle": "esbuild --bundle dist/index.js --keep-names --outfile=dist/bundle.js --format=esm",
17 |     "build": "tsc && npm run bundle && npm run manifest",
18 |     "prepublishOnly": "npm run build",
19 |     "pretest": "npm run build; npx playwright install",
20 |     "test": "web-test-runner",
21 |     "postpublish": "npm publish --ignore-scripts --@github:registry='https://npm.pkg.github.com'",
22 |     "manifest": "custom-elements-manifest analyze"
23 |   },
24 |   "prettier": "@github/prettier-config",
25 |   "keywords": [
26 |     "auto-complete"
27 |   ],
28 |   "license": "MIT",
29 |   "files": [
30 |     "dist",
31 |     "validator.js"
32 |   ],
33 |   "dependencies": {
34 |     "@github/combobox-nav": "^2.1.7"
35 |   },
36 |   "devDependencies": {
37 |     "@custom-elements-manifest/analyzer": "^0.9.0",
38 |     "@github/prettier-config": "^0.0.6",
39 |     "@open-wc/testing": "^3.1.8",
40 |     "@web/dev-server-esbuild": "^0.4.1",
41 |     "@web/test-runner": "^0.19.0",
42 |     "@web/test-runner-playwright": "^0.11.0",
43 |     "axe-core": "^4.4.1",
44 |     "esbuild": "^0.25.0",
45 |     "eslint": "^8.39.0",
46 |     "eslint-plugin-custom-elements": "^0.0.8",
47 |     "eslint-plugin-github": "^4.7.0",
48 |     "http-server": "^14.1.1",
49 |     "karma-chai": "^0.1.0",
50 |     "karma-mocha": "^2.0.1",
51 |     "karma-mocha-reporter": "^2.2.5",
52 |     "rollup-plugin-node-resolve": "^5.2.0",
53 |     "typescript": "^5.2.2"
54 |   },
55 |   "customElements": "custom-elements.json"
56 | }
57 | 


--------------------------------------------------------------------------------
/validator.js:
--------------------------------------------------------------------------------
 1 | const SELECTOR = 'auto-complete'
 2 | const INPUT_RULE_ID = 'required-input-element-child'
 3 | // eslint-disable-next-line i18n-text/no-en
 4 | const INPUT_HELP_TEXT = 'This component requires an input field to be provided.'
 5 | const CLEAR_BUTTON_RULE_ID = 'optional-clear-must-be-button'
 6 | // eslint-disable-next-line i18n-text/no-en
 7 | const CLEAR_BUTTON_HELP_TEXT = 'If provided with clear button, it must be a button element.'
 8 | 
 9 | function checkForInput(autoCompleteElement) {
10 |   return autoCompleteElement.querySelectorAll('input').length === 1
11 | }
12 | 
13 | function checkForOptionalClearButton(autoCompleteElement) {
14 |   const [input] = autoCompleteElement.querySelectorAll('input')
15 |   if (!input) {
16 |     return true
17 |   }
18 |   const clearButtonId = `${input.id || input.getAttribute('name')}-clear`
19 |   const clearButton = autoCompleteElement.ownerDocument.getElementById(clearButtonId)
20 |   if (!clearButton) {
21 |     return true
22 |   }
23 |   if (clearButton instanceof HTMLButtonElement) {
24 |     return true
25 |   }
26 |   return false
27 | }
28 | 
29 | const rules = [
30 |   {
31 |     id: INPUT_RULE_ID,
32 |     excludeHidden: true,
33 |     selector: SELECTOR,
34 |     metadata: {
35 |       help: INPUT_HELP_TEXT,
36 |       helpUrl: '',
37 |     },
38 |     all: [`${INPUT_RULE_ID}_0`],
39 |   },
40 |   {
41 |     id: CLEAR_BUTTON_RULE_ID,
42 |     excludeHidden: true,
43 |     selector: SELECTOR,
44 |     metadata: {
45 |       help: CLEAR_BUTTON_HELP_TEXT,
46 |       helpUrl: '',
47 |     },
48 |     all: [`${CLEAR_BUTTON_RULE_ID}_0`],
49 |   },
50 | ]
51 | 
52 | const checks = [
53 |   {
54 |     id: `${INPUT_RULE_ID}_0`,
55 |     evaluate: checkForInput,
56 |     metadata: {impact: 'critical'},
57 |   },
58 |   {
59 |     id: `${CLEAR_BUTTON_RULE_ID}_0`,
60 |     evaluate: checkForOptionalClearButton,
61 |     metadata: {impact: 'critical'},
62 |   },
63 | ]
64 | 
65 | export function validator(domNode) {
66 |   const result = {
67 |     passes: [],
68 |     violations: [],
69 |   }
70 |   for (const element of domNode.getElementsByTagName(SELECTOR)) {
71 |     for (const rule of rules) {
72 |       for (const checkId of rule.all) {
73 |         const thisCheck = checks.find(check => check.id === checkId)
74 |         const checkResult = thisCheck.evaluate(element)
75 | 
76 |         result[checkResult ? 'passes' : 'violations'].push({
77 |           id: rule.id,
78 |           help: rule.metadata.help,
79 |           helpUrl: rule.metadata.helpUrl,
80 |           nodes: [element],
81 |         })
82 |       }
83 |     }
84 |   }
85 |   return result
86 | }
87 | 
88 | /**
89 |  *
90 |  * @param {import('axe-core').Spec} ruleset
91 |  * @returns {import('axe-core').Spec}
92 |  */
93 | export default function combineRules(ruleset = {}) {
94 |   return Object.assign({}, ruleset, {
95 |     checks: (ruleset.checks || []).concat(checks),
96 |     rules: (ruleset.rules || []).concat(rules),
97 |   })
98 | }
99 | 


--------------------------------------------------------------------------------
/src/auto-complete-element.ts:
--------------------------------------------------------------------------------
  1 | import Autocomplete from './autocomplete.js'
  2 | const HTMLElement = globalThis.HTMLElement || (null as unknown as (typeof window)['HTMLElement'])
  3 | 
  4 | type AutoCompleteEventInit = EventInit & {
  5 |   relatedTarget: HTMLInputElement
  6 | }
  7 | 
  8 | export class AutoCompleteEvent extends Event {
  9 |   relatedTarget: HTMLInputElement
 10 | 
 11 |   constructor(type: 'auto-complete-change', {relatedTarget, ...init}: AutoCompleteEventInit) {
 12 |     super(type, init)
 13 |     this.relatedTarget = relatedTarget
 14 |   }
 15 | }
 16 | 
 17 | const state = new WeakMap()
 18 | 
 19 | export interface CSPTrustedTypesPolicy {
 20 |   createHTML: (s: string, response: Response) => CSPTrustedHTMLToStringable
 21 | }
 22 | 
 23 | // Note: basically every object (and some primitives) in JS satisfy this
 24 | // `CSPTrustedHTMLToStringable` interface, but this is the most compatible shape
 25 | // we can use.
 26 | interface CSPTrustedHTMLToStringable {
 27 |   toString: () => string
 28 | }
 29 | 
 30 | let cspTrustedTypesPolicyPromise: Promise<CSPTrustedTypesPolicy> | null = null
 31 | 
 32 | export class AutoCompleteElement extends HTMLElement {
 33 |   static define(tag = 'auto-complete', registry = customElements) {
 34 |     registry.define(tag, this)
 35 |     return this
 36 |   }
 37 | 
 38 |   static setCSPTrustedTypesPolicy(policy: CSPTrustedTypesPolicy | Promise<CSPTrustedTypesPolicy> | null): void {
 39 |     cspTrustedTypesPolicyPromise = policy === null ? policy : Promise.resolve(policy)
 40 |   }
 41 | 
 42 |   #forElement: HTMLElement | null = null
 43 |   get forElement(): HTMLElement | null {
 44 |     if (this.#forElement?.isConnected) {
 45 |       return this.#forElement
 46 |     }
 47 |     const id = this.getAttribute('for')
 48 |     const root = this.getRootNode()
 49 |     if (id && (root instanceof Document || root instanceof ShadowRoot)) {
 50 |       return root.getElementById(id)
 51 |     }
 52 |     return null
 53 |   }
 54 | 
 55 |   set forElement(element: HTMLElement | null) {
 56 |     this.#forElement = element
 57 |     this.setAttribute('for', '')
 58 |   }
 59 | 
 60 |   #inputElement: HTMLInputElement | null = null
 61 |   get inputElement(): HTMLInputElement | null {
 62 |     if (this.#inputElement?.isConnected) {
 63 |       return this.#inputElement
 64 |     }
 65 |     return this.querySelector<HTMLInputElement>('input')
 66 |   }
 67 | 
 68 |   set inputElement(input: HTMLInputElement | null) {
 69 |     this.#inputElement = input
 70 |     this.#reattachState()
 71 |   }
 72 | 
 73 |   connectedCallback(): void {
 74 |     if (!this.isConnected) return
 75 |     this.#reattachState()
 76 | 
 77 |     new MutationObserver(() => {
 78 |       if (!state.get(this)) {
 79 |         this.#reattachState()
 80 |       }
 81 |     }).observe(this, {subtree: true, childList: true})
 82 |   }
 83 | 
 84 |   disconnectedCallback(): void {
 85 |     const autocomplete = state.get(this)
 86 |     if (autocomplete) {
 87 |       autocomplete.destroy()
 88 |       state.delete(this)
 89 |     }
 90 |   }
 91 | 
 92 |   #reattachState() {
 93 |     state.get(this)?.destroy()
 94 |     const {forElement, inputElement} = this
 95 |     if (!forElement || !inputElement) return
 96 |     const autoselectEnabled = this.getAttribute('data-autoselect') === 'true'
 97 |     state.set(this, new Autocomplete(this, inputElement, forElement, autoselectEnabled))
 98 |     forElement.setAttribute('role', 'listbox')
 99 |   }
100 | 
101 |   get src(): string {
102 |     return this.getAttribute('src') || ''
103 |   }
104 | 
105 |   set src(url: string) {
106 |     this.setAttribute('src', url)
107 |   }
108 | 
109 |   get value(): string {
110 |     return this.getAttribute('value') || ''
111 |   }
112 | 
113 |   set value(value: string) {
114 |     this.setAttribute('value', value)
115 |   }
116 | 
117 |   get open(): boolean {
118 |     return this.hasAttribute('open')
119 |   }
120 | 
121 |   set open(value: boolean) {
122 |     if (value) {
123 |       this.setAttribute('open', '')
124 |     } else {
125 |       this.removeAttribute('open')
126 |     }
127 |   }
128 | 
129 |   // HEAD
130 |   get fetchOnEmpty(): boolean {
131 |     return this.hasAttribute('fetch-on-empty')
132 |   }
133 | 
134 |   set fetchOnEmpty(fetchOnEmpty: boolean) {
135 |     this.toggleAttribute('fetch-on-empty', fetchOnEmpty)
136 |   }
137 | 
138 |   #requestController?: AbortController
139 |   async fetchResult(url: URL): Promise<string | CSPTrustedHTMLToStringable> {
140 |     this.#requestController?.abort()
141 |     const {signal} = (this.#requestController = new AbortController())
142 |     const res = await fetch(url.toString(), {
143 |       signal,
144 |       headers: {
145 |         Accept: 'text/fragment+html',
146 |       },
147 |     })
148 |     if (!res.ok) {
149 |       throw new Error(await res.text())
150 |     }
151 |     if (cspTrustedTypesPolicyPromise) {
152 |       const cspTrustedTypesPolicy = await cspTrustedTypesPolicyPromise
153 |       return cspTrustedTypesPolicy.createHTML(await res.text(), res)
154 |     }
155 |     return await res.text()
156 |   }
157 |   //f21528e (add csp trusted types policy)
158 |   static get observedAttributes(): string[] {
159 |     return ['open', 'value', 'for']
160 |   }
161 | 
162 |   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
163 |     if (oldValue === newValue) return
164 | 
165 |     const autocomplete = state.get(this)
166 |     if (!autocomplete) return
167 | 
168 |     if (this.forElement !== state.get(this)?.results || this.inputElement !== state.get(this)?.input) {
169 |       this.#reattachState()
170 |     }
171 | 
172 |     switch (name) {
173 |       case 'open':
174 |         newValue === null ? autocomplete.close() : autocomplete.open()
175 |         break
176 |       case 'value':
177 |         if (newValue !== null) {
178 |           autocomplete.input.value = newValue
179 |         }
180 |         this.dispatchEvent(
181 |           new AutoCompleteEvent('auto-complete-change', {
182 |             bubbles: true,
183 |             relatedTarget: autocomplete.input,
184 |           }),
185 |         )
186 |         break
187 |     }
188 |   }
189 | }
190 | 
191 | export default AutoCompleteElement
192 | 


--------------------------------------------------------------------------------
/custom-elements.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "schemaVersion": "1.0.0",
  3 |   "readme": "",
  4 |   "modules": [
  5 |     {
  6 |       "kind": "javascript-module",
  7 |       "path": "src/auto-complete-element.ts",
  8 |       "declarations": [
  9 |         {
 10 |           "kind": "class",
 11 |           "description": "",
 12 |           "name": "AutoCompleteEvent",
 13 |           "members": [
 14 |             {
 15 |               "kind": "field",
 16 |               "name": "relatedTarget",
 17 |               "type": {
 18 |                 "text": "HTMLInputElement"
 19 |               },
 20 |               "default": "relatedTarget"
 21 |             }
 22 |           ],
 23 |           "superclass": {
 24 |             "name": "Event",
 25 |             "module": "src/auto-complete-element.ts"
 26 |           }
 27 |         },
 28 |         {
 29 |           "kind": "class",
 30 |           "description": "",
 31 |           "name": "AutoCompleteElement",
 32 |           "members": [
 33 |             {
 34 |               "kind": "method",
 35 |               "name": "define",
 36 |               "static": true,
 37 |               "parameters": [
 38 |                 {
 39 |                   "name": "tag",
 40 |                   "default": "'auto-complete'"
 41 |                 },
 42 |                 {
 43 |                   "name": "registry",
 44 |                   "default": "customElements"
 45 |                 }
 46 |               ]
 47 |             },
 48 |             {
 49 |               "kind": "method",
 50 |               "name": "setCSPTrustedTypesPolicy",
 51 |               "static": true,
 52 |               "return": {
 53 |                 "type": {
 54 |                   "text": "void"
 55 |                 }
 56 |               },
 57 |               "parameters": [
 58 |                 {
 59 |                   "name": "policy",
 60 |                   "type": {
 61 |                     "text": "CSPTrustedTypesPolicy | Promise<CSPTrustedTypesPolicy> | null"
 62 |                   }
 63 |                 }
 64 |               ]
 65 |             },
 66 |             {
 67 |               "kind": "field",
 68 |               "name": "#forElement",
 69 |               "privacy": "private",
 70 |               "type": {
 71 |                 "text": "HTMLElement | null"
 72 |               },
 73 |               "default": "null"
 74 |             },
 75 |             {
 76 |               "kind": "field",
 77 |               "name": "forElement",
 78 |               "type": {
 79 |                 "text": "HTMLElement | null"
 80 |               }
 81 |             },
 82 |             {
 83 |               "kind": "field",
 84 |               "name": "#inputElement",
 85 |               "privacy": "private",
 86 |               "type": {
 87 |                 "text": "HTMLInputElement | null"
 88 |               },
 89 |               "default": "null"
 90 |             },
 91 |             {
 92 |               "kind": "field",
 93 |               "name": "inputElement",
 94 |               "type": {
 95 |                 "text": "HTMLInputElement | null"
 96 |               }
 97 |             },
 98 |             {
 99 |               "kind": "method",
100 |               "name": "#reattachState"
101 |             },
102 |             {
103 |               "kind": "field",
104 |               "name": "src",
105 |               "type": {
106 |                 "text": "string"
107 |               }
108 |             },
109 |             {
110 |               "kind": "field",
111 |               "name": "value",
112 |               "type": {
113 |                 "text": "string"
114 |               }
115 |             },
116 |             {
117 |               "kind": "field",
118 |               "name": "open",
119 |               "type": {
120 |                 "text": "boolean"
121 |               }
122 |             },
123 |             {
124 |               "kind": "field",
125 |               "name": "fetchOnEmpty",
126 |               "type": {
127 |                 "text": "boolean"
128 |               }
129 |             },
130 |             {
131 |               "kind": "field",
132 |               "name": "#requestController",
133 |               "privacy": "private",
134 |               "type": {
135 |                 "text": "AbortController | undefined"
136 |               }
137 |             },
138 |             {
139 |               "kind": "method",
140 |               "name": "fetchResult",
141 |               "return": {
142 |                 "type": {
143 |                   "text": "Promise<string | CSPTrustedHTMLToStringable>"
144 |                 }
145 |               },
146 |               "parameters": [
147 |                 {
148 |                   "name": "url",
149 |                   "type": {
150 |                     "text": "URL"
151 |                   }
152 |                 }
153 |               ]
154 |             }
155 |           ],
156 |           "events": [
157 |             {
158 |               "name": "auto-complete-change",
159 |               "type": {
160 |                 "text": "AutoCompleteEvent"
161 |               }
162 |             }
163 |           ],
164 |           "attributes": [
165 |             {
166 |               "name": "open"
167 |             },
168 |             {
169 |               "name": "value"
170 |             },
171 |             {
172 |               "name": "for"
173 |             }
174 |           ],
175 |           "superclass": {
176 |             "name": "HTMLElement"
177 |           },
178 |           "customElement": true
179 |         }
180 |       ],
181 |       "exports": [
182 |         {
183 |           "kind": "js",
184 |           "name": "AutoCompleteEvent",
185 |           "declaration": {
186 |             "name": "AutoCompleteEvent",
187 |             "module": "src/auto-complete-element.ts"
188 |           }
189 |         },
190 |         {
191 |           "kind": "js",
192 |           "name": "AutoCompleteElement",
193 |           "declaration": {
194 |             "name": "AutoCompleteElement",
195 |             "module": "src/auto-complete-element.ts"
196 |           }
197 |         },
198 |         {
199 |           "kind": "js",
200 |           "name": "default",
201 |           "declaration": {
202 |             "name": "AutoCompleteElement",
203 |             "module": "src/auto-complete-element.ts"
204 |           }
205 |         }
206 |       ]
207 |     }
208 |   ]
209 | }
210 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <title>Auto-complete examples</title>
  5 |     <meta charset="utf-8" />
  6 |     <style>
  7 |       auto-complete [aria-selected='true'],
  8 |       auto-complete [role='option']:hover {
  9 |         background-color: lavender;
 10 |       }
 11 |       auto-complete [aria-disabled='true'] {
 12 |         color: grey;
 13 |       }
 14 |     </style>
 15 |     <script>
 16 |       var robotsList = `
 17 |             <li role="option" data-autocomplete-value="@hubot">Hubot</li>
 18 |             <li role="option" data-autocomplete-value="@bender">Bender</li>
 19 |             <li role="option" data-autocomplete-value="@bb-8">BB-8</li>
 20 |             <li role="option" data-autocomplete-value="@r2d2" aria-disabled="true">R2-D2 (powered down)</li>
 21 |           `;
 22 |       class FakeXMLHttpRequest {
 23 |         abort() {
 24 |           // Do nothing.
 25 |         }
 26 |         open(method, url) {
 27 |           // Do nothing.
 28 |         }
 29 |         setRequestHeader(name, value) {
 30 |           // Do nothing.
 31 |         }
 32 |         send() {
 33 |           this.status = 200
 34 |           this.responseText = robotsList
 35 |           setTimeout(this.onload.bind(this), 0)
 36 |         }
 37 |       }
 38 |       window.XMLHttpRequest = FakeXMLHttpRequest
 39 |     </script>
 40 |   </head>
 41 |   <body>
 42 |     <form>
 43 |       <label id="robots-label" for="robot">Robots</label>
 44 |       <!-- To enable auto-select (select first on Enter), use data-autoselect="true" -->
 45 |       <auto-complete src="/demo" for="items-popup" aria-labelledby="robots-label" data-autoselect="true">
 46 |         <input name="robot" type="text" aria-labelledby="robots-label" autofocus />
 47 |         <!-- if a clear button is passed in, recommended to be *before* UL elements to avoid conflicting with their blur logic -->
 48 |         <button id="robot-clear">x</button>
 49 |         <ul id="items-popup"></ul>
 50 |         <!-- For built-in screen-reader announcements:
 51 |           - Note the ID is the same as the <ul> with "feedback" appended
 52 |           - Also note that aria attributes will be added programmatically if they aren't set correctly
 53 |         -->
 54 |         <div id="items-popup-feedback" class="sr-only"></div>
 55 |       </auto-complete>
 56 |       <button type="submit">Save</button>
 57 |     </form>
 58 | 
 59 |     <!-- example where clear button uses input id -->
 60 |     <form>
 61 |       <label id="robots-a-label" for="robot-a">Robots (using Input ID)</label>
 62 |       <!-- To enable auto-select (select first on Enter), use data-autoselect="true" -->
 63 |       <auto-complete src="/demo" for="items-a-popup" aria-labelledby="robots-a-label" data-autoselect="true">
 64 |         <input id="robot-a" name="robot-a" type="text" aria-labelledby="robots-a-label" autofocus />
 65 |         <!-- if a clear button is passed in, recommended to be *before* UL elements to avoid conflicting with their blur logic -->
 66 |         <button id="robot-a-clear">x</button>
 67 |         <ul id="items-a-popup"></ul>
 68 |         <!-- For built-in screen-reader announcements:
 69 |           - Note the ID is the same as the <ul> with "feedback" appended
 70 |           - Also note that aria attributes will be added programmatically if they aren't set correctly
 71 |         -->
 72 |         <div id="items-a-popup-feedback" class="sr-only"></div>
 73 |       </auto-complete>
 74 |       <button type="submit">Save</button>
 75 |     </form>
 76 | 
 77 |     <!-- example without autoselect -->
 78 |     <form>
 79 |       <label id="robots-2-label" for="robot-2">Robots (without autoselect on enter)</label>
 80 |       <auto-complete src="/demo" for="items-2-popup" aria-labelledby="robots-2-label">
 81 |         <input name="robot-2" type="text" aria-labelledby="robots-2-label" autofocus />
 82 |         <ul id="items-2-popup"></ul>
 83 |         <div id="items-2-popup-feedback" class="sr-only"></div>
 84 |       </auto-complete>
 85 |       <button type="submit">Save</button>
 86 |     </form>
 87 | 
 88 |     <!-- example with a custom fetching result method -->
 89 |     <form>
 90 |       <label id="custom-fetching-robots-label" for="custom-fetching-robot">Custom Fetching Robots</label>
 91 |       <auto-complete
 92 |         id="custom-fetching-method"
 93 |         src="/demo"
 94 |         for="custom-fetching-items-popup"
 95 |         aria-labelledby="custom-fetching-robots-label"
 96 |         data-autoselect="true"
 97 |       >
 98 |         <input name="custom-fetching-robot" type="text" aria-labelledby="custom-fetching-robots-label" autofocus />
 99 |         <ul id="custom-fetching-items-popup"></ul>
100 |         <div id="custom-fetching-items-popup-feedback" class="sr-only"></div>
101 |       </auto-complete>
102 |       <button type="submit">Save</button>
103 |     </form> 
104 |     <script>
105 |       window.fetch = (url) => {
106 |         const query = url.split('?q=')[1]
107 |         if (query === 'none') {
108 |           return  Promise.resolve(new Response('<li role="presentation" aria-hidden="true" data-no-result-found="true">No results found!</li>'))
109 |         }
110 |         return Promise.resolve(new Response(robotsList));
111 |       }
112 |       // fetchResult must be a function that return a Promise of string and that accepts as parameters a URL
113 |       document.querySelector("auto-complete#custom-fetching-method").fetchResult = async (url) => (await fetch(url)).text();
114 |     </script>
115 | 
116 |     <form>
117 |       <label id="fetch-on-empty-robots-label" for="fetch-on-empty-robot">Fetch on empty Robots</label>
118 |       <!-- To enable fetch on empty use fetch-on-empty attribute -->
119 |       <auto-complete src="/demo" for="fetch-on-empty-items-popup" aria-labelledby="fetch-on-empty-robots-label" fetch-on-empty>
120 |         <input name="fetch-on-empty-robot" type="text" aria-labelledby="fetch-on-empty-robots-label" autofocus />
121 |         <button id="fetch-on-empty-robot-clear">x</button>
122 |         <ul id="fetch-on-empty-items-popup"></ul>
123 |         <div id="fetch-on-empty-items-popup-feedback" class="sr-only"></div>
124 |       </auto-complete>
125 |       <button type="submit">Save</button>
126 |     </form>
127 | 
128 | <!--    <script type="module" src="./dist/bundle.js"></script>-->
129 |         <script type="module" src="https://unpkg.com/@github/auto-complete-element@latest/dist/bundle.js"></script>
130 |   </body>
131 | </html>
132 |  
133 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # &lt;auto-complete&gt; element
  2 | 
  3 | Auto-complete input values from server search results.
  4 | 
  5 | ## Installation
  6 | 
  7 | ```
  8 | $ npm install --save @github/auto-complete-element
  9 | ```
 10 | 
 11 | ## Usage
 12 | 
 13 | ### Script
 14 | 
 15 | Import as ES modules:
 16 | 
 17 | ```js
 18 | import '@github/auto-complete-element'
 19 | ```
 20 | 
 21 | With a script tag:
 22 | 
 23 | ```html
 24 | <script type="module" src="./node_modules/@github/auto-complete-element/dist/bundle.js">
 25 | ```
 26 | 
 27 | ### Markup
 28 | 
 29 | ```html
 30 | <auto-complete src="/users/search" for="users-popup">
 31 |   <input type="text" name="users">
 32 |   <!--
 33 |     Optional clear button:
 34 |     - id must match the id of the input or the name of the input plus "-clear"
 35 |     - recommended to be *before* UL elements to avoid conflicting with their blur logic
 36 | 
 37 |     Please see Note below on this button for more details
 38 |   -->
 39 |   <button id="users-clear">X</button>
 40 |   <ul id="users-popup"></ul>
 41 |   <!--
 42 |     Optional div for screen reader feedback. Note the ID matches the ul, but with -feedback appended.
 43 |     Recommended: Use a "Screen Reader Only" class to position the element off the visual boundary of the page.
 44 |   -->
 45 |   <div id="users-popup-feedback" class="sr-only"></div>
 46 | </auto-complete>
 47 | ```
 48 | 
 49 | If you want to enable auto-select (pressing Enter in the input will select the first option), using the above example:
 50 | ```html
 51 | <auto-complete data-autoselect="true" src="/users/search" for="users-popup">
 52 | ...
 53 | </auto-complete>
 54 | ```
 55 | 
 56 | The server response should include the items that matched the search query.
 57 | 
 58 | ```html
 59 | <li role="option">Hubot</li>
 60 | <li role="option">Bender</li>
 61 | <li role="option">BB-8</li>
 62 | <li role="option" aria-disabled="true">R2-D2 (powered down)</li>
 63 | ```
 64 | 
 65 | The `data-autocomplete-value` attribute can be used to define the value for an
 66 | item whose display text needs to be different:
 67 | 
 68 | ```html
 69 | <li role="option" data-autocomplete-value="bb8">BB-8 (astromech)</li>
 70 | ```
 71 | 
 72 | Use `data-no-result-found="true"` to show a no results message inside the autocomplete popover. Be sure to add `role="presentation"` 
 73 | to this element so that screen readers do not mistake this as an auto-complete option. The auto-complete-element has built in functionality that
 74 | handles aria-live announcing number of search results so this should be purely decorative. 
 75 | 
 76 | ```html
 77 | <li role="presentation" aria-hidden="true" data-no-result-found="true">No results found!</li>
 78 | ```
 79 | 
 80 | ### A Note on Clear button
 81 | While `input type="search"` comes with an `x` that clears the content of the field and refocuses it on many browsers, the implementation for this control is not keyboard accessible, and so we've opted to enable a customizable clear button so that your keyboard users will be able to interact with it.
 82 | 
 83 | As an example:
 84 | > In Chrome, this 'x' isn't a button but a div with a pseudo="-webkit-search-cancel-button". It doesn't have a tab index or a way to navigate to it without a mouse. Additionally, this control is only visible on mouse hover.
 85 | 
 86 | 
 87 | ## Attributes
 88 | 
 89 | - `open` is true when the auto-complete result list is visible
 90 | - `value` is the selected value from the list or the empty string when cleared
 91 | 
 92 | ## Properties
 93 | 
 94 | - `fetchResult` you can override the default method used to query for results by overriding this property: `document.querySelector('auto-complete').fetchResult = async (url) => (await fetch(url)).text()`
 95 | 
 96 | ## Events
 97 | 
 98 | ### Network request lifecycle events
 99 | 
100 | Request lifecycle events are dispatched on the `<auto-complete>` element. These events do not bubble.
101 | 
102 | - `loadstart` - The server fetch has started.
103 | - `load` - The network request completed successfully.
104 | - `error` - The network request failed.
105 | - `loadend` - The network request has completed.
106 | 
107 | Network events are useful for displaying progress states while the request is in-flight.
108 | 
109 | ```js
110 | const completer = document.querySelector('auto-complete')
111 | const container = completer.parentElement
112 | completer.addEventListener('loadstart', () => container.classList.add('is-loading'))
113 | completer.addEventListener('loadend', () => container.classList.remove('is-loading'))
114 | completer.addEventListener('load', () => container.classList.add('is-success'))
115 | completer.addEventListener('error', () => container.classList.add('is-error'))
116 | ```
117 | 
118 | ### Auto-complete events
119 | 
120 | **`auto-complete-change`** is dispatched after a value is selected. In `event` you can find:
121 | 
122 | - `relatedTarget`: The HTMLInputElement controlling the auto-complete result list.
123 | 
124 | ```js
125 | completer.addEventListener('auto-complete-change', function(event) {
126 |   console.log('Auto-completed value chosen or cleared', completer.value)
127 |   console.log('Related input element', event.relatedTarget)
128 | })
129 | ```
130 | 
131 | ### CSP Trusted Types
132 | 
133 | You can call
134 | `setCSPTrustedTypesPolicy(policy: TrustedTypePolicy | Promise<TrustedTypePolicy> | null)`
135 | from JavaScript to set a
136 | [CSP trusted types policy](https://web.dev/trusted-types/), which can perform
137 | (synchronous) filtering or rejection of the `fetch` response before it is
138 | inserted into the page:
139 | 
140 | ```ts
141 | import AutoCompleteElement from 'auto-complete-element'
142 | import DOMPurify from 'dompurify' // Using https://github.com/cure53/DOMPurify
143 | 
144 | // This policy removes all HTML markup except links.
145 | const policy = trustedTypes.createPolicy('links-only', {
146 |   createHTML: (htmlText: string) => {
147 |     return DOMPurify.sanitize(htmlText, {
148 |       ALLOWED_TAGS: ['a'],
149 |       ALLOWED_ATTR: ['href'],
150 |       RETURN_TRUSTED_TYPE: true
151 |     })
152 |   }
153 | })
154 | AutoCompleteElement.setCSPTrustedTypesPolicy(policy)
155 | ```
156 | 
157 | The policy has access to the `fetch` response object. Due to platform
158 | constraints, only synchronous information from the response (in addition to the
159 | HTML text body) can be used in the policy:
160 | 
161 | ```ts
162 | import AutoCompleteElement from 'auto-complete-element'
163 | 
164 | const policy = trustedTypes.createPolicy('require-server-header', {
165 |   createHTML: (htmlText: string, response: Response) => {
166 |     if (response.headers.get('X-Server-Sanitized') !== 'sanitized=true') {
167 |       // Note: this will reject the contents, but the error may be caught before it shows in the JS console.
168 |       throw new Error('Rejecting HTML that was not marked by the server as sanitized.')
169 |     }
170 |     return htmlText
171 |   }
172 | })
173 | AutoCompleteElement.setCSPTrustedTypesPolicy(policy)
174 | ```
175 | 
176 | Note that:
177 | 
178 | - Only a single policy can be set, shared by all `AutoCompleteElement` fetches.
179 | - You should call `setCSPTrustedTypesPolicy()` ahead of any other load of
180 |   `auto-complete` element in your code.
181 |   - If your policy itself requires asynchronous work to construct, you can also
182 |     pass a `Promise<TrustedTypePolicy>`.
183 |   - Pass `null` to remove the policy.
184 | - Not all browsers
185 |   [support the trusted types API in JavaScript](https://caniuse.com/mdn-api_trustedtypes).
186 |   You may want to use the
187 |   [recommended tinyfill](https://github.com/w3c/trusted-types#tinyfill) to
188 |   construct a policy without causing issues in other browsers.
189 | 
190 | ## Browser support
191 | 
192 | Browsers without native [custom element support][support] require a [polyfill][].
193 | 
194 | - Chrome
195 | - Firefox
196 | - Safari
197 | - Microsoft Edge
198 | 
199 | [support]: https://caniuse.com/#feat=custom-elementsv1
200 | [polyfill]: https://github.com/webcomponents/custom-elements
201 | 
202 | ## Development
203 | 
204 | ```
205 | npm install
206 | npm test
207 | ```
208 | 
209 | To view changes locally, run `npm run examples`.
210 | 
211 | In `examples/index.html`, uncomment `<!--<script type="module" src="./dist/bundle.js"></script>-->` and comment out the script referencing the `unpkg` version. This allows you to use the `src` code in this repo. Otherwise, you will be pulling the latest published code, which will not reflect the local changes you are making.
212 | 
213 | ## Accessibility Testing
214 | 
215 | We have included some custom rules that assist in providing guardrails to confirm this component is being used accessibly.
216 | 
217 | If you are using the `axe-core` library in your project,
218 | ```js
219 | import axe from 'axe-core'
220 | import autoCompleteRulesBuilder from '@github/auto-complete-element/validator'
221 | 
222 | const autoCompleteRules = autoCompleteRulesBuilder() // optionally, pass in your app's custom rules object, it will build and return the full object
223 | 
224 | axe.configure(autoCompleteRules)
225 | axe.run(document)
226 | ```
227 | 
228 | ## Validate usage in your project
229 | 
230 | To confirm your usage is working as designed,
231 | ```js
232 | import { validator } from '@github/auto-complete-element/validator' 
233 | 
234 | const resultObject = validator(document)
235 | ```
236 | Passes and failures may be determined by the length of the `passes` and `violations` arrays on the returned object:
237 | ```js
238 | {
239 |   passes: [],
240 |   violations: []
241 | }
242 | ```
243 | 
244 | ## License
245 | 
246 | Distributed under the MIT license. See LICENSE for details.
247 | 


--------------------------------------------------------------------------------
/src/autocomplete.ts:
--------------------------------------------------------------------------------
  1 | import type AutocompleteElement from './auto-complete-element'
  2 | import Combobox from '@github/combobox-nav'
  3 | import debounce from './debounce.js'
  4 | 
  5 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  6 | // @ts-ignore
  7 | const SCREEN_READER_DELAY = window.testScreenReaderDelay || 100
  8 | 
  9 | export default class Autocomplete {
 10 |   container: AutocompleteElement
 11 |   input: HTMLInputElement
 12 |   results: HTMLElement
 13 |   combobox: Combobox
 14 |   feedback: HTMLElement | null
 15 |   autoselectEnabled: boolean
 16 |   clientOptions: NodeListOf<HTMLElement> | null
 17 |   clearButton: HTMLElement | null
 18 | 
 19 |   interactingWithList: boolean
 20 | 
 21 |   constructor(
 22 |     container: AutocompleteElement,
 23 |     input: HTMLInputElement,
 24 |     results: HTMLElement,
 25 |     autoselectEnabled = false,
 26 |   ) {
 27 |     this.container = container
 28 |     this.input = input
 29 |     this.results = results
 30 |     this.combobox = new Combobox(input, results, {
 31 |       defaultFirstOption: autoselectEnabled,
 32 |     })
 33 |     this.feedback = (container.getRootNode() as Document).getElementById(`${this.results.id}-feedback`)
 34 |     this.autoselectEnabled = autoselectEnabled
 35 |     this.clearButton = (container.getRootNode() as Document).getElementById(`${this.input.id || this.input.name}-clear`)
 36 | 
 37 |     // check to see if there are any default options provided
 38 |     this.clientOptions = results.querySelectorAll('[role=option]')
 39 | 
 40 |     // make sure feedback has all required aria attributes
 41 |     if (this.feedback) {
 42 |       this.feedback.setAttribute('aria-live', 'polite')
 43 |       this.feedback.setAttribute('aria-atomic', 'true')
 44 |     }
 45 | 
 46 |     // if clearButton doesn't have an accessible label, give it one
 47 |     if (this.clearButton && !this.clearButton.getAttribute('aria-label')) {
 48 |       const labelElem = document.querySelector(`label[for="${this.input.name}"]`)
 49 |       this.clearButton.setAttribute('aria-label', `clear:`)
 50 |       this.clearButton.setAttribute('aria-labelledby', `${this.clearButton.id} ${labelElem?.id || ''}`)
 51 |     }
 52 | 
 53 |     // initialize with the input being expanded=false
 54 |     if (!this.input.getAttribute('aria-expanded')) {
 55 |       this.input.setAttribute('aria-expanded', 'false')
 56 |     }
 57 | 
 58 |     if (this.results.popover) {
 59 |       if (this.results.matches(':popover-open')) {
 60 |         this.results.hidePopover()
 61 |       }
 62 |     } else {
 63 |       this.results.hidden = true
 64 |     }
 65 | 
 66 |     // @jscholes recommends a generic "results" label as the results are already related to the combobox, which is properly labelled
 67 |     if (!this.results.getAttribute('aria-label')) {
 68 |       this.results.setAttribute('aria-label', 'results')
 69 |     }
 70 | 
 71 |     this.input.setAttribute('autocomplete', 'off')
 72 |     this.input.setAttribute('spellcheck', 'false')
 73 | 
 74 |     this.interactingWithList = false
 75 | 
 76 |     this.onInputChange = debounce(this.onInputChange.bind(this), 300)
 77 |     this.onResultsMouseDown = this.onResultsMouseDown.bind(this)
 78 |     this.onInputBlur = this.onInputBlur.bind(this)
 79 |     this.onInputFocus = this.onInputFocus.bind(this)
 80 |     this.onKeydown = this.onKeydown.bind(this)
 81 |     this.onCommit = this.onCommit.bind(this)
 82 |     this.handleClear = this.handleClear.bind(this)
 83 | 
 84 |     this.input.addEventListener('keydown', this.onKeydown)
 85 |     this.input.addEventListener('focus', this.onInputFocus)
 86 |     this.input.addEventListener('blur', this.onInputBlur)
 87 |     this.input.addEventListener('input', this.onInputChange)
 88 |     this.results.addEventListener('mousedown', this.onResultsMouseDown)
 89 |     this.results.addEventListener('combobox-commit', this.onCommit)
 90 |     this.clearButton?.addEventListener('click', this.handleClear)
 91 |   }
 92 | 
 93 |   destroy(): void {
 94 |     this.input.removeEventListener('keydown', this.onKeydown)
 95 |     this.input.removeEventListener('focus', this.onInputFocus)
 96 |     this.input.removeEventListener('blur', this.onInputBlur)
 97 |     this.input.removeEventListener('input', this.onInputChange)
 98 |     this.results.removeEventListener('mousedown', this.onResultsMouseDown)
 99 |     this.results.removeEventListener('combobox-commit', this.onCommit)
100 |   }
101 | 
102 |   handleClear(event: Event): void {
103 |     event.preventDefault()
104 | 
105 |     if (this.input.getAttribute('aria-expanded') === 'true') {
106 |       this.input.setAttribute('aria-expanded', 'false')
107 |       // eslint-disable-next-line i18n-text/no-en
108 |       this.updateFeedbackForScreenReaders('Results hidden.')
109 |     }
110 | 
111 |     this.input.value = ''
112 |     this.container.value = ''
113 |     this.input.focus()
114 |     this.input.dispatchEvent(new Event('change'))
115 |     this.close()
116 |   }
117 | 
118 |   onKeydown(event: KeyboardEvent): void {
119 |     if (event.key === 'Escape' && this.container.open) {
120 |       this.close()
121 |       event.stopPropagation()
122 |       event.preventDefault()
123 |     } else if (event.altKey && event.key === 'ArrowUp' && this.container.open) {
124 |       this.close()
125 |       event.stopPropagation()
126 |       event.preventDefault()
127 |     } else if (event.altKey && event.key === 'ArrowDown' && !this.container.open) {
128 |       if (!this.input.value.trim()) return
129 |       this.open()
130 |       event.stopPropagation()
131 |       event.preventDefault()
132 |     }
133 |   }
134 | 
135 |   onInputFocus(): void {
136 |     if (this.interactingWithList) return
137 |     this.fetchResults()
138 |   }
139 | 
140 |   onInputBlur(): void {
141 |     if (this.interactingWithList) return
142 |     this.close()
143 |   }
144 | 
145 |   onCommit({target}: Pick<Event, 'target'>): void {
146 |     const selected = target
147 |     if (!(selected instanceof HTMLElement)) return
148 |     this.close()
149 |     if (selected instanceof HTMLAnchorElement) return
150 |     const value = selected.getAttribute('data-autocomplete-value') || selected.textContent!
151 |     this.updateFeedbackForScreenReaders(`${selected.textContent || ''} selected.`)
152 |     this.container.value = value
153 | 
154 |     if (!value) {
155 |       // eslint-disable-next-line i18n-text/no-en
156 |       this.updateFeedbackForScreenReaders(`Results hidden.`)
157 |     }
158 |   }
159 | 
160 |   onResultsMouseDown(): void {
161 |     this.interactingWithList = true
162 |   }
163 | 
164 |   onInputChange(): void {
165 |     if (this.feedback && this.feedback.textContent) {
166 |       this.feedback.textContent = ''
167 |     }
168 |     this.container.removeAttribute('value')
169 |     this.fetchResults()
170 |   }
171 | 
172 |   identifyOptions(): void {
173 |     let id = 0
174 |     for (const el of this.results.querySelectorAll('[role="option"]:not([id])')) {
175 |       el.id = `${this.results.id}-option-${id++}`
176 |     }
177 |   }
178 | 
179 |   updateFeedbackForScreenReaders(inputString: string): void {
180 |     setTimeout(() => {
181 |       if (this.feedback) {
182 |         this.feedback.textContent = inputString
183 |       }
184 |     }, SCREEN_READER_DELAY)
185 |   }
186 | 
187 |   fetchResults(): void {
188 |     const query = this.input.value.trim()
189 |     if (!query && !this.container.fetchOnEmpty) {
190 |       this.close()
191 |       return
192 |     }
193 | 
194 |     const src = this.container.src
195 |     if (!src) return
196 | 
197 |     const url = new URL(src, window.location.href)
198 |     const params = new URLSearchParams(url.search.slice(1))
199 |     params.append('q', query)
200 |     url.search = params.toString()
201 | 
202 |     this.container.dispatchEvent(new CustomEvent('loadstart'))
203 |     this.container
204 |       .fetchResult(url)
205 |       // eslint-disable-next-line github/no-then
206 |       .then(html => {
207 |         // eslint-disable-next-line github/no-inner-html
208 |         this.results.innerHTML = html as string
209 |         this.identifyOptions()
210 |         this.combobox.indicateDefaultOption()
211 |         const allNewOptions = this.results.querySelectorAll('[role="option"]')
212 | 
213 |         const hasResults =
214 |           !!allNewOptions.length || !!this.results.querySelectorAll('[data-no-result-found="true"]').length
215 |         const numOptions = allNewOptions.length
216 | 
217 |         const [firstOption] = allNewOptions
218 |         const firstOptionValue = firstOption?.textContent
219 |         if (this.autoselectEnabled && firstOptionValue) {
220 |           // inform SR users of which element is "on-deck" so that it's clear what Enter will do
221 |           this.updateFeedbackForScreenReaders(
222 |             `${numOptions} results. ${firstOptionValue} is the top result: Press Enter to activate.`,
223 |           )
224 |         } else {
225 |           this.updateFeedbackForScreenReaders(`${numOptions || 'No'} results.`)
226 |         }
227 | 
228 |         hasResults ? this.open() : this.close()
229 |         this.container.dispatchEvent(new CustomEvent('load'))
230 |         this.container.dispatchEvent(new CustomEvent('loadend'))
231 |       })
232 |       // eslint-disable-next-line github/no-then
233 |       .catch(() => {
234 |         this.container.dispatchEvent(new CustomEvent('error'))
235 |         this.container.dispatchEvent(new CustomEvent('loadend'))
236 |       })
237 |   }
238 | 
239 |   open(): void {
240 |     const isHidden = this.results.popover ? !this.results.matches(':popover-open') : this.results.hidden
241 |     if (isHidden) {
242 |       this.combobox.start()
243 |       if (this.results.popover) {
244 |         this.results.showPopover()
245 |       } else {
246 |         this.results.hidden = false
247 |       }
248 |     }
249 |     this.container.open = true
250 |     this.interactingWithList = true
251 |   }
252 | 
253 |   close(): void {
254 |     const isVisible = this.results.popover ? this.results.matches(':popover-open') : !this.results.hidden
255 |     if (isVisible) {
256 |       this.combobox.stop()
257 |       if (this.results.popover) {
258 |         this.results.hidePopover()
259 |       } else {
260 |         this.results.hidden = true
261 |       }
262 |     }
263 |     this.container.open = false
264 |     this.interactingWithList = false
265 |   }
266 | }
267 | 


--------------------------------------------------------------------------------
/test/validation-tests.js:
--------------------------------------------------------------------------------
  1 | import {assert, chai} from '@open-wc/testing'
  2 | import 'axe-core'
  3 | 
  4 | import autoCompleteRulesBuilder, {validator} from '../validator.js'
  5 | chai.config.truncateThreshold = Infinity
  6 | 
  7 | const autoCompleteRules = autoCompleteRulesBuilder()
  8 | 
  9 | function makeDOMNode(htmlString) {
 10 |   const parser = new DOMParser()
 11 |   return parser.parseFromString(htmlString, 'text/html')
 12 | }
 13 | function getValidatorResult(htmlString) {
 14 |   return validator(makeDOMNode(htmlString))
 15 | }
 16 | function getAxeResult(htmlString, rules) {
 17 |   const {axe} = globalThis
 18 |   axe.reset()
 19 |   axe.configure(autoCompleteRules)
 20 |   return axe.run(makeDOMNode(htmlString), {
 21 |     runOnly: {type: 'rule', values: rules},
 22 |   })
 23 | }
 24 | 
 25 | describe('all validation checks', function () {
 26 |   describe('input', function () {
 27 |     describe('if none provided', function () {
 28 |       const testString = `
 29 |         <auto-complete src="/search" for="popup" data-autoselect="true">
 30 |           <ul id="popup"></ul>
 31 |           <div id="popup-feedback"></div>
 32 |         </auto-complete>
 33 |         `
 34 |       it('javascript validator fails', function () {
 35 |         const result = getValidatorResult(testString)
 36 |         assert.lengthOf(result.passes, 1)
 37 |         assert.lengthOf(result.violations, 1)
 38 |         assert.equal(result.violations[0].id, 'required-input-element-child')
 39 |         assert.equal(result.violations[0].help, 'This component requires an input field to be provided.')
 40 |       })
 41 |       it('axe check fails', async function () {
 42 |         const result = await getAxeResult(testString, ['required-input-element-child', 'optional-clear-must-be-button'])
 43 |         assert.lengthOf(result.passes, 1)
 44 |         assert.lengthOf(result.violations, 1)
 45 |         assert.equal(result.violations[0].id, 'required-input-element-child')
 46 |         assert.equal(result.violations[0].help, 'This component requires an input field to be provided.')
 47 |       })
 48 |     })
 49 | 
 50 |     describe('if provided 2 inputs', function () {
 51 |       const testString = `
 52 |         <auto-complete src="/search" for="popup" data-autoselect="true">
 53 |           <input name="example" type="text" />
 54 |           <input name="a-second-example" type="text" />
 55 |           <ul id="popup"></ul>
 56 |           <div id="popup-feedback"></div>
 57 |         </auto-complete>
 58 |         `
 59 |       it('javscript validator fails', function () {
 60 |         const result = getValidatorResult(testString)
 61 |         assert.lengthOf(result.passes, 1)
 62 |         assert.lengthOf(result.violations, 1)
 63 |         assert.equal(result.violations[0].id, 'required-input-element-child')
 64 |         assert.equal(result.violations[0].help, 'This component requires an input field to be provided.')
 65 |       })
 66 |       it('axe check validator fails', async function () {
 67 |         const result = await getAxeResult(testString, ['required-input-element-child', 'optional-clear-must-be-button'])
 68 |         assert.lengthOf(result.passes, 1)
 69 |         assert.lengthOf(result.violations, 1)
 70 |         assert.equal(result.violations[0].id, 'required-input-element-child')
 71 |         assert.equal(result.violations[0].help, 'This component requires an input field to be provided.')
 72 |       })
 73 |     })
 74 | 
 75 |     describe('if incorrect labelling', function () {
 76 |       const testString = `
 77 |         <auto-complete src="/search" for="popup" data-autoselect="true">
 78 |           <ul id="popup"></ul>
 79 |           <div id="popup-feedback"></div>
 80 |         </auto-complete>
 81 |         `
 82 |       it('javscript validator fails', function () {
 83 |         const result = getValidatorResult(testString)
 84 |         assert.lengthOf(result.passes, 1)
 85 |         assert.lengthOf(result.violations, 1)
 86 |         assert.equal(result.violations[0].id, 'required-input-element-child')
 87 |         assert.equal(result.violations[0].help, 'This component requires an input field to be provided.')
 88 |       })
 89 |       it('axe check fails', async function () {
 90 |         const result = await getAxeResult(testString, ['required-input-element-child', 'optional-clear-must-be-button'])
 91 |         assert.lengthOf(result.passes, 1)
 92 |         assert.lengthOf(result.violations, 1)
 93 |         assert.equal(result.violations[0].id, 'required-input-element-child')
 94 |         assert.equal(result.violations[0].help, 'This component requires an input field to be provided.')
 95 |       })
 96 |     })
 97 |   })
 98 | 
 99 |   describe('clear button', function () {
100 |     describe('if provided but not a button', function () {
101 |       const testString = `
102 |         <auto-complete src="/search" for="popup" data-autoselect="true">
103 |           <label>
104 |             My Fun Label
105 |             <input name="example" type="text" />
106 |             <span id="example-clear">x</span>
107 |             <ul id="popup"></ul>
108 |             <div id="popup-feedback"></div>
109 |           </label>
110 |         </auto-complete>
111 |         `
112 |       it('javascript validator fails', function () {
113 |         const result = getValidatorResult(testString)
114 |         assert.lengthOf(result.passes, 1)
115 |         assert.lengthOf(result.violations, 1)
116 |         assert.equal(result.violations[0].id, ['optional-clear-must-be-button'])
117 |         assert.equal(result.violations[0].help, 'If provided with clear button, it must be a button element.')
118 |       })
119 |       it('axe check fails', async function () {
120 |         const result = await getAxeResult(testString, ['required-input-element-child', 'optional-clear-must-be-button'])
121 |         assert.lengthOf(result.passes, 1)
122 |         assert.lengthOf(result.violations, 1)
123 |         assert.equal(result.violations[0].id, ['optional-clear-must-be-button'])
124 |         assert.equal(result.violations[0].help, 'If provided with clear button, it must be a button element.')
125 |       })
126 |     })
127 |     describe('if provided and given both id and name attribute, prefers id', function () {
128 |       const testString = `
129 |         <auto-complete src="/search" for="popup" data-autoselect="true">
130 |           <label>
131 |             My Fun Label
132 |             <input name="some-name" id="example" type="text" />
133 |             <span id="example-clear">x</span>
134 |             <ul id="popup"></ul>
135 |             <div id="popup-feedback"></div>
136 |           </label>
137 |         </auto-complete>
138 |         `
139 |       it('javascript validator fails', function () {
140 |         const result = getValidatorResult(testString)
141 |         assert.lengthOf(result.passes, 1)
142 |         assert.lengthOf(result.violations, 1)
143 |         assert.equal(result.violations[0].id, ['optional-clear-must-be-button'])
144 |         assert.equal(result.violations[0].help, 'If provided with clear button, it must be a button element.')
145 |       })
146 |       it('axe check fails', async function () {
147 |         const result = await getAxeResult(testString, ['required-input-element-child', 'optional-clear-must-be-button'])
148 |         assert.lengthOf(result.passes, 1)
149 |         assert.lengthOf(result.violations, 1)
150 |         assert.equal(result.violations[0].id, ['optional-clear-must-be-button'])
151 |         assert.equal(result.violations[0].help, 'If provided with clear button, it must be a button element.')
152 |       })
153 |     })
154 |   })
155 | 
156 |   describe('correct usage', function () {
157 |     describe('passes when provided with all correct children, implicit label', function () {
158 |       const testString = `
159 |         <auto-complete src="/search" for="popup" data-autoselect="true">
160 |           <label>
161 |             My Label
162 |             <input name="example" type="text">
163 |             <button id="example-clear">x</button>
164 |             <ul id="popup"></ul>
165 |             <div id="popup-feedback"></div>
166 |           </label>
167 |         </auto-complete>
168 |         `
169 |       it('javascript validator passes', () => {
170 |         const result = getValidatorResult(testString)
171 |         assert.lengthOf(result.passes, 2)
172 |         assert.lengthOf(result.violations, 0)
173 |       })
174 |       it('axe check passes', async function () {
175 |         const result = await getAxeResult(testString, ['required-input-element-child', 'optional-clear-must-be-button'])
176 |         assert.lengthOf(result.passes, 2)
177 |         assert.lengthOf(result.violations, 0)
178 |       })
179 |     })
180 | 
181 |     describe('passes when provided with all correct children, aria-label', function () {
182 |       const testString = `
183 |       <auto-complete src="/search" for="popup" data-autoselect="true">
184 |       <input name="example" type="text" aria-label="My Fun Label">
185 |       <button id="example-clear">x</button>
186 |       <ul id="popup"></ul>
187 |       <div id="popup-feedback"></div>
188 |       </auto-complete>
189 |       `
190 |       it('javascript validator passes', () => {
191 |         const result = getValidatorResult(testString)
192 |         assert.lengthOf(result.passes, 2)
193 |         assert.lengthOf(result.violations, 0)
194 |       })
195 |       it('axe check passes', async function () {
196 |         const result = await getAxeResult(testString, ['required-input-element-child', 'optional-clear-must-be-button'])
197 |         assert.lengthOf(result.passes, 2)
198 |         assert.lengthOf(result.violations, 0)
199 |       })
200 |     })
201 | 
202 |     describe('passes when provided with all correct children, aria-labelledby', function () {
203 |       const testString = `
204 |       <h1 id='some-id-for-search-header'>My Search</h1>
205 |       <auto-complete src="/search" for="popup" data-autoselect="true">
206 |       <input name="example" type="text" aria-labelledby="some-id-for-search-header">
207 |       <button id="example-clear">x</button>
208 |       <ul id="popup"></ul>
209 |       <div id="popup-feedback"></div>
210 |       </auto-complete>
211 |       `
212 |       it('javascript validator passes', () => {
213 |         const result = getValidatorResult(testString)
214 |         assert.lengthOf(result.passes, 2)
215 |         assert.lengthOf(result.violations, 0)
216 |       })
217 |       it('axe check passes', async function () {
218 |         const result = await getAxeResult(testString, ['required-input-element-child', 'optional-clear-must-be-button'])
219 |         assert.lengthOf(result.passes, 2)
220 |         assert.lengthOf(result.violations, 0)
221 |       })
222 |     })
223 | 
224 |     describe('passes when provided with all correct children, explicit label', function () {
225 |       const testString = `
226 |       <label for="example-input-field">My Auto Complete Label</label>
227 |       <auto-complete src="/search" for="popup" data-autoselect="true">
228 |         <input name="example" type="text" id="example-input-field">
229 |         <button id="example-input-field-clear">x</button>
230 |         <ul id="popup"></ul>
231 |         <div id="popup-feedback"></div>
232 |       </auto-complete>
233 |       `
234 |       it('javascript validator passes', () => {
235 |         const result = getValidatorResult(testString)
236 |         assert.lengthOf(result.passes, 2)
237 |         assert.lengthOf(result.violations, 0)
238 |       })
239 |       it('axe check passes', async function () {
240 |         const result = await getAxeResult(testString, ['required-input-element-child', 'optional-clear-must-be-button'])
241 |         assert.lengthOf(result.passes, 2)
242 |         assert.lengthOf(result.violations, 0)
243 |       })
244 |     })
245 |   })
246 | })
247 | 


--------------------------------------------------------------------------------
/test/auto-complete-element.js:
--------------------------------------------------------------------------------
  1 | import {assert} from '@open-wc/testing'
  2 | import {AutoCompleteElement} from '../src/index.ts'
  3 | 
  4 | const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
  5 | 
  6 | describe('auto-complete element', function () {
  7 |   describe('no results', () => {
  8 |     beforeEach(function () {
  9 |       document.body.innerHTML = `
 10 |         <div id="mocha-fixture">
 11 |           <auto-complete src="/noresults" for="popup">
 12 |             <input type="text">
 13 |             <ul id="popup"></ul>
 14 |             <div id="popup-feedback"></div>
 15 |           </auto-complete>
 16 |         </div>
 17 |       `
 18 |     })
 19 | 
 20 |     it('checks that no results is displayed', async () => {
 21 |       const container = document.querySelector('auto-complete')
 22 |       const input = container.querySelector('input')
 23 |       const popup = container.querySelector('#popup')
 24 | 
 25 |       triggerInput(input, 'none')
 26 |       await once(container, 'loadend')
 27 |       assert.isTrue(container.open)
 28 |       assert.equal(1, popup.children.length)
 29 |     })
 30 |   })
 31 | 
 32 |   describe('element creation', function () {
 33 |     it('creates from document.createElement', function () {
 34 |       const el = document.createElement('auto-complete')
 35 |       assert.equal('AUTO-COMPLETE', el.nodeName)
 36 |       assert.ok(el instanceof AutoCompleteElement)
 37 |     })
 38 | 
 39 |     it('creates from constructor', function () {
 40 |       const el = new window.AutocompleteElement()
 41 |       assert.equal('AUTO-COMPLETE', el.nodeName)
 42 |       assert.ok(el instanceof AutoCompleteElement)
 43 |     })
 44 |   })
 45 | 
 46 |   // eslint-disable-next-line func-style
 47 |   const serverResponseExamples = function () {
 48 |     it('requests html fragment', async function () {
 49 |       const container = document.querySelector('auto-complete')
 50 |       const input = container.querySelector('input')
 51 |       const popup = container.querySelector('#popup')
 52 | 
 53 |       triggerInput(input, 'hub')
 54 |       await once(container, 'loadend')
 55 |       assert.equal(5, popup.children.length)
 56 |     })
 57 | 
 58 |     it('respects arrow keys', async function () {
 59 |       const container = document.querySelector('auto-complete')
 60 |       const input = container.querySelector('input')
 61 |       const popup = container.querySelector('#popup')
 62 | 
 63 |       assert.isTrue(keydown(input, 'ArrowDown'))
 64 |       triggerInput(input, 'hub')
 65 |       await once(container, 'loadend')
 66 | 
 67 |       assert.isNull(popup.querySelector('[aria-selected="true"]'))
 68 |       assert.isFalse(keydown(input, 'ArrowDown'))
 69 |       assert.equal('first', popup.querySelector('[aria-selected="true"]').textContent)
 70 |       assert.isFalse(keydown(input, 'ArrowDown'))
 71 |       assert.equal('second', popup.querySelector('[aria-selected="true"]').textContent)
 72 |       assert.isFalse(keydown(input, 'ArrowUp'))
 73 |       assert.equal('first', popup.querySelector('[aria-selected="true"]').textContent)
 74 |     })
 75 | 
 76 |     it('dispatches change event on commit', async function () {
 77 |       const container = document.querySelector('auto-complete')
 78 |       const input = container.querySelector('input')
 79 | 
 80 |       triggerInput(input, 'hub')
 81 |       await once(container, 'loadend')
 82 | 
 83 |       let value
 84 |       let relatedTarget
 85 |       container.addEventListener(
 86 |         'auto-complete-change',
 87 |         function (event) {
 88 |           value = event.target.value
 89 |           relatedTarget = event.relatedTarget
 90 |         },
 91 |         {once: true},
 92 |       )
 93 | 
 94 |       assert.isTrue(keydown(input, 'Enter'))
 95 |       assert.equal('', container.value)
 96 |       assert.isFalse(keydown(input, 'ArrowDown'))
 97 |       assert.isFalse(keydown(input, 'Enter'))
 98 |       assert.equal('first', value)
 99 |       assert.equal(input, relatedTarget)
100 |       assert.isTrue(keydown(input, 'Tab'))
101 |     })
102 | 
103 |     it('summarizes the available options on keypress', async function () {
104 |       const container = document.querySelector('auto-complete')
105 |       const input = container.querySelector('input')
106 |       const feedback = container.querySelector(`#popup-feedback`)
107 | 
108 |       triggerInput(input, 'hub')
109 |       await once(container, 'loadend')
110 |       await waitForElementToChange(feedback)
111 | 
112 |       assert.equal('5 results.', feedback.innerHTML)
113 |     })
114 | 
115 |     it('commits on Enter', async function () {
116 |       const container = document.querySelector('auto-complete')
117 |       const input = container.querySelector('input')
118 | 
119 |       triggerInput(input, 'hub')
120 |       await once(container, 'loadend')
121 | 
122 |       assert.isTrue(keydown(input, 'Enter'))
123 |       assert.equal('', container.value)
124 |       assert.isFalse(keydown(input, 'ArrowDown'))
125 |       assert.isFalse(keydown(input, 'Enter'))
126 |       assert.equal('first', container.value)
127 |       assert.isFalse(container.open)
128 |     })
129 | 
130 |     it('does not commit on disabled option', async function () {
131 |       const container = document.querySelector('auto-complete')
132 |       const input = container.querySelector('input')
133 |       const popup = container.querySelector('#popup')
134 | 
135 |       triggerInput(input, 'hub')
136 |       await once(container, 'loadend')
137 | 
138 |       assert.isFalse(keydown(input, 'ArrowDown'))
139 |       assert.isFalse(keydown(input, 'ArrowDown'))
140 |       assert.isFalse(keydown(input, 'ArrowDown'))
141 |       assert.isFalse(keydown(input, 'ArrowDown'))
142 |       assert.equal('fourth', popup.querySelector('[aria-selected="true"]').textContent)
143 |       assert.isFalse(keydown(input, 'Enter'))
144 |       assert.equal('', container.value)
145 |       assert.isTrue(container.open)
146 |     })
147 | 
148 |     it('does not commit text value on link item navigation', async function () {
149 |       const container = document.querySelector('auto-complete')
150 |       const input = container.querySelector('input')
151 | 
152 |       triggerInput(input, 'hub')
153 |       await once(container, 'loadend')
154 | 
155 |       const link = container.querySelector('a[role=option]')
156 | 
157 |       assert.equal('', container.value)
158 |       link.click()
159 |       assert.equal('', container.value)
160 |       assert.equal('#hash', window.location.hash)
161 |       assert.isFalse(container.open)
162 |     })
163 | 
164 |     it('closes on Escape', async function () {
165 |       const container = document.querySelector('auto-complete')
166 |       const input = container.querySelector('input')
167 |       const popup = container.querySelector('#popup')
168 | 
169 |       triggerInput(input, 'hub')
170 |       await once(container, 'loadend')
171 | 
172 |       assert.isTrue(container.open)
173 |       if (!popup.popover) assert.isFalse(popup.hidden)
174 |       assert.isFalse(keydown(input, 'Escape'))
175 |       assert.isFalse(container.open)
176 |       if (!popup.popover) assert.isTrue(popup.hidden)
177 |     })
178 | 
179 |     it('opens and closes on alt + ArrowDown and alt + ArrowUp', async function () {
180 |       const container = document.querySelector('auto-complete')
181 |       const input = container.querySelector('input')
182 |       const popup = container.querySelector('#popup')
183 | 
184 |       triggerInput(input, 'hub')
185 |       await once(container, 'loadend')
186 | 
187 |       assert.isTrue(container.open)
188 |       if (!popup.popover) assert.isFalse(popup.hidden)
189 | 
190 |       assert.isFalse(keydown(input, 'ArrowUp', true))
191 |       assert.isFalse(container.open)
192 |       if (!popup.popover) assert.isTrue(popup.hidden)
193 | 
194 |       assert.isFalse(keydown(input, 'ArrowDown', true))
195 |       assert.isTrue(container.open)
196 |       if (!popup.popover) assert.isFalse(popup.hidden)
197 |     })
198 | 
199 |     it('allows providing a custom fetch method', async () => {
200 |       const container = document.querySelector('auto-complete')
201 |       const input = container.querySelector('input')
202 |       const popup = container.querySelector('#popup')
203 | 
204 |       container.fetchResult = async () => `
205 |         <li>Mock Custom Fetch Result 1</li>
206 |         <li>Mock Custom Fetch Result 2</li>
207 |       `
208 | 
209 |       triggerInput(input, 'hub')
210 |       await once(container, 'loadend')
211 |       assert.equal(2, popup.children.length)
212 |       assert.equal(popup.querySelector('li').textContent, 'Mock Custom Fetch Result 1')
213 |     })
214 |   }
215 | 
216 |   describe('requesting server results (non-popover)', function () {
217 |     beforeEach(function () {
218 |       document.body.innerHTML = `
219 |         <div id="mocha-fixture">
220 |           <auto-complete src="/search" for="popup">
221 |             <input type="text">
222 |             <ul id="popup"></ul>
223 |             <div id="popup-feedback"></div>
224 |           </auto-complete>
225 |         </div>
226 |       `
227 |     })
228 | 
229 |     serverResponseExamples()
230 |   })
231 | 
232 |   describe('requesting server results (popover)', function () {
233 |     beforeEach(function () {
234 |       document.body.innerHTML = `
235 |         <div id="mocha-fixture">
236 |           <auto-complete src="/search" for="popup">
237 |             <input type="text">
238 |             <ul popover id="popup"></ul>
239 |             <div id="popup-feedback"></div>
240 |           </auto-complete>
241 |         </div>
242 |       `
243 |     })
244 | 
245 |     serverResponseExamples()
246 |   })
247 | 
248 |   describe('clear button provided', () => {
249 |     it('clears the input value on click and gives focus back to the input', async () => {
250 |       document.body.innerHTML = `
251 |         <div id="mocha-fixture">
252 |           <auto-complete src="/search" for="popup" data-autoselect="true">
253 |             <input id="example" type="text">
254 |             <button id="example-clear">x</button>
255 |             <ul id="popup"></ul>
256 |             <div id="popup-feedback"></div>
257 |           </auto-complete>
258 |         </div>
259 |       `
260 | 
261 |       const container = document.querySelector('auto-complete')
262 |       const input = container.querySelector('input')
263 |       const clearButton = document.getElementById('example-clear')
264 |       const feedback = container.querySelector(`#popup-feedback`)
265 | 
266 |       triggerInput(input, 'hub')
267 |       await once(container, 'loadend')
268 | 
269 |       assert.equal(input.value, 'hub')
270 |       await waitForElementToChange(feedback)
271 | 
272 |       clearButton.click()
273 |       assert.equal(input.value, '')
274 |       assert.equal(container.value, '')
275 |       await waitForElementToChange(feedback)
276 |       assert.equal('Results hidden.', feedback.innerHTML)
277 |       assert.equal(document.activeElement, input)
278 |     })
279 |   })
280 | 
281 |   describe('autoselect enabled', () => {
282 |     beforeEach(function () {
283 |       document.body.innerHTML = `
284 |         <div id="mocha-fixture">
285 |           <auto-complete src="/search" for="popup" data-autoselect="true">
286 |             <input type="text">
287 |             <ul id="popup"></ul>
288 |             <div id="popup-feedback"></div>
289 |           </auto-complete>
290 |         </div>
291 |       `
292 |     })
293 | 
294 |     it('summarizes the available options and informs what will happen on Enter', async function () {
295 |       const container = document.querySelector('auto-complete')
296 |       const input = container.querySelector('input')
297 |       const feedback = container.querySelector(`#popup-feedback`)
298 | 
299 |       triggerInput(input, 'hub')
300 |       await once(container, 'loadend')
301 |       await waitForElementToChange(feedback)
302 | 
303 |       assert.equal(`5 results. first is the top result: Press Enter to activate.`, feedback.innerHTML)
304 |     })
305 |   })
306 | 
307 |   describe('fetch on empty enabled', () => {
308 |     let container
309 |     beforeEach(function () {
310 |       document.body.innerHTML = `
311 |         <div id="mocha-fixture">
312 |           <auto-complete fetch-on-empty src="/moke" for="popup" data-autoselect="true">
313 |             <input type="text" value="1">
314 |             <ul id="popup"></ul>
315 |             <div id="popup-feedback"></div>
316 |           </auto-complete>
317 |         </div>
318 |       `
319 |       container = document.querySelector('auto-complete')
320 |       container.fetchResult = async () => `
321 |         <li>Mock Custom Fetch Result 1</li>
322 |         <li>Mock Custom Fetch Result 2</li>`
323 |     })
324 | 
325 |     it('should fetch result when value is empty', async function () {
326 |       const input = container.querySelector('input')
327 |       const popup = container.querySelector(`#popup`)
328 |       const feedback = container.querySelector(`#popup-feedback`)
329 | 
330 |       triggerInput(input, '')
331 |       await once(container, 'loadend')
332 | 
333 |       assert.equal(2, popup.children.length)
334 |       assert.equal(popup.querySelector('li').textContent, 'Mock Custom Fetch Result 1')
335 |       assert.equal(feedback.textContent, '')
336 |     })
337 | 
338 |     it('does not fetch result when value is empty, if fetch-on-empty removed', async function () {
339 |       const input = container.querySelector('input')
340 |       const popup = container.querySelector(`#popup`)
341 |       const feedback = container.querySelector(`#popup-feedback`)
342 |       container.fetchOnEmpty = false
343 | 
344 |       triggerInput(input, '')
345 |       await sleep(100)
346 | 
347 |       assert.equal(0, popup.children.length)
348 |       assert.equal(feedback.textContent, '')
349 |     })
350 |   })
351 | 
352 |   describe('shadowdom', () => {
353 |     let shadow = null
354 |     beforeEach(function () {
355 |       const fixture = document.createElement('div')
356 |       fixture.id = 'mocha-fixture'
357 |       document.body.append(fixture)
358 |       shadow = fixture.attachShadow({mode: 'open'})
359 |       shadow.innerHTML = `
360 |           <auto-complete src="/search" for="popup">
361 |             <input type="text">
362 |             <ul id="popup"></ul>
363 |             <div id="popup-feedback"></div>
364 |           </auto-complete>
365 |         </div>
366 |       `
367 |     })
368 | 
369 |     it('uses rootNode to find idrefs', async function () {
370 |       const container = shadow.querySelector('auto-complete')
371 |       const input = container.querySelector('input')
372 |       const popup = container.querySelector('#popup')
373 | 
374 |       triggerInput(input, 'hub')
375 |       await once(container, 'loadend')
376 |       assert.equal(5, popup.children.length)
377 |     })
378 |   })
379 | 
380 |   describe('redefining elements', () => {
381 |     beforeEach(function () {
382 |       document.body.innerHTML = `
383 |         <div id="mocha-fixture">
384 |           <auto-complete src="/search" data-autoselect="true">
385 |             <input type="text">
386 |             <input id="second" type="text">
387 |             <ul></ul>
388 |             <div id="popup-feedback"></div>
389 |           </auto-complete>
390 |         </div>
391 |       `
392 |     })
393 | 
394 |     it('changes where content gets rendered based on properties', async function () {
395 |       const container = document.querySelector('auto-complete')
396 |       const input = container.querySelector('input#second')
397 |       const list = container.querySelector('ul')
398 |       container.forElement = list
399 |       container.inputElement = input
400 | 
401 |       triggerInput(input, 'hub')
402 |       await once(container, 'loadend')
403 | 
404 |       assert.equal(5, list.children.length)
405 |     })
406 |   })
407 | 
408 |   describe('trustedHTML', () => {
409 |     beforeEach(function () {
410 |       document.body.innerHTML = `
411 |         <div id="mocha-fixture">
412 |           <auto-complete src="/search" for="popup" data-autoselect="true">
413 |             <input type="text">
414 |             <ul id="popup"></ul>
415 |             <div id="popup-feedback"></div>
416 |           </auto-complete>
417 |         </div>
418 |       `
419 |     })
420 | 
421 |     it('calls trusted types policy, passing response to it', async function () {
422 |       const calls = []
423 |       const html = '<li><strong>replacement</strong></li>'
424 |       window.AutocompleteElement.setCSPTrustedTypesPolicy({
425 |         createHTML(str, res) {
426 |           calls.push([str, res])
427 |           return html
428 |         },
429 |       })
430 |       const container = document.querySelector('auto-complete')
431 |       const popup = container.querySelector('#popup')
432 |       const input = container.querySelector('input')
433 | 
434 |       triggerInput(input, 'hub')
435 |       await once(container, 'loadend')
436 | 
437 |       assert.equal(calls.length, 1)
438 |       assert.equal(popup.children.length, 1)
439 |       assert.equal(popup.innerHTML, html)
440 |     })
441 |   })
442 | 
443 |   describe('popovers', () => {
444 |     beforeEach(function () {
445 |       document.querySelector('auto-complete #popup').setAttribute('popover', '')
446 |     })
447 | 
448 |     it('opens and closes using popover', function () {
449 |       const container = document.querySelector('auto-complete')
450 |       const popup = container.querySelector('#popup')
451 | 
452 |       container.open = false
453 |       assert.isFalse(popup.matches(':popover-open'), 'is not popover-open')
454 | 
455 |       container.open = true
456 |       assert.isTrue(popup.matches(':popover-open'), 'is popover-open')
457 | 
458 |       container.open = false
459 |       assert.isFalse(popup.matches(':popover-open'), 'is not popover-open')
460 |     })
461 |   })
462 | })
463 | 
464 | function waitForElementToChange(el) {
465 |   return new Promise(resolve => {
466 |     const observer = new MutationObserver(mutations => {
467 |       for (const mutation of mutations) {
468 |         if (mutation.addedNodes.length > 0) {
469 |           observer.disconnect()
470 |           resolve()
471 |         }
472 |       }
473 |     })
474 |     observer.observe(el, {childList: true, subtree: true})
475 |   })
476 | }
477 | 
478 | function once(element, eventName) {
479 |   return new Promise(resolve => {
480 |     element.addEventListener(eventName, resolve, {once: true})
481 |   })
482 | }
483 | 
484 | function triggerInput(input, value) {
485 |   input.value = value
486 |   return input.dispatchEvent(new InputEvent('input'))
487 | }
488 | 
489 | const keyCodes = {
490 |   ArrowDown: 40,
491 |   ArrowUp: 38,
492 |   Enter: 13,
493 |   Escape: 27,
494 |   Tab: 9,
495 | }
496 | 
497 | function keydown(element, key, alt = false) {
498 |   const e = {
499 |     shiftKey: false,
500 |     altKey: alt,
501 |     ctrlKey: false,
502 |     metaKey: false,
503 |   }
504 | 
505 |   key = key.replace(/\b(Ctrl|Alt|Meta)\+/g, function (_, type) {
506 |     e[`${type}Key`] = true
507 |     return ''
508 |   })
509 |   e.key = key
510 |   if (key.length === 1 && key !== key.toLowerCase()) e.shiftKey = true
511 |   e.keyCode = keyCodes[key] || key.toUpperCase().charCodeAt(0)
512 |   e.which = e.keyCode
513 | 
514 |   const event = document.createEvent('Events')
515 |   event.initEvent('keydown', true, true)
516 | 
517 |   for (const prop in e) {
518 |     event[prop] = e[prop]
519 |   }
520 | 
521 |   return element.dispatchEvent(event)
522 | }
523 | 


--------------------------------------------------------------------------------