Skip to content

Commit

Permalink
Stop forcing anchor attribute on list element
Browse files Browse the repository at this point in the history
  • Loading branch information
@klovaaxel
klovaaxel committed May 8, 2024
1 parent 72cbecb commit 577580b
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 50 deletions.
4 changes: 2 additions & 2 deletions docs/assets/index-oXCdMaLN.js → docs/assets/index-D5_-bhyh.js
View file

Large diffs are not rendered by default.

46 changes: 23 additions & 23 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/css.min.js"></script>
<!-- end -->
<script type="module" crossorigin src="./assets/index-oXCdMaLN.js"></script>
<script type="module" crossorigin src="./assets/index-D5_-bhyh.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-Dw9mXXwR.css">
</head>
<body>
Expand Down Expand Up @@ -100,8 +100,8 @@ <h2>Demo</h2>

<label style="display: block;" for="demo-input">Select a cast member:</label>
<combobox-framework data-limit="20" data-fuse-options='{ "includeScore": true, "keys": ["dataset.search"]}'>
<input id="demo-input" placeholder="Click me" type="text" slot="input" />
<table slot="list">
<input id="demo-input" placeholder="Click me" type="text" slot="input" size="50" />
<table anchor="demo-input" slot="list">
<thead>
<tr>
<th>Name</th>
Expand Down Expand Up @@ -512,8 +512,8 @@ <h3>Simple list</h3>

<div data-example>
<combobox-framework>
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="simple-list-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="simple-list-input" slot="list">
<li data-value="1">Item 1</li>
<li data-value="2">Item 2</li>
<li data-value="3">Item 3</li>
Expand All @@ -534,8 +534,8 @@ <h3>Simple list with custom display data</h3>

<div data-example>
<combobox-framework>
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="custom-display-data-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="custom-display-data-input" slot="list">
<li data-value="1" data-display="Item 1">1</li>
<li data-value="2" data-display="Item 2">2</li>
<li data-value="3" data-display="Item 3">3</li>
Expand All @@ -556,8 +556,8 @@ <h3>List with nested elements</h3>

<div data-example>
<combobox-framework>
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="nested-elements-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="nested-elements-input" slot="list">
<li data-value="1" data-display="Item 1">
<div>Item 1</div>
</li>
Expand Down Expand Up @@ -586,8 +586,8 @@ <h3>Tabular data</h3>

<div data-example>
<combobox-framework>
<input placeholder="Click me" type="text" slot="input" />
<table slot="list">
<input id="tabular-data-input" placeholder="Click me" type="text" slot="input" />
<table anchor="tabular-data-input" slot="list">
<thead>
<th>Name</th>
<th>Number</th>
Expand Down Expand Up @@ -626,8 +626,8 @@ <h3>Preselected option</h3>

<div data-example>
<combobox-framework data-value="1">
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="preselected-option-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="preselected-option-input" slot="list">
<li data-value="1">Item 1</li>
<li data-value="2">Item 2</li>
<li data-value="3">Item 3</li>
Expand All @@ -654,8 +654,8 @@ <h3>Custom Fuse/Fuzzy search options</h3>

<div data-example>
<combobox-framework data-fuse-options='{ "includeScore": true, "keys": ["dataset.value"]}'>
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="fuse-options-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="fuse-options-input" slot="list">
<li data-value="1">Item 1</li>
<li data-value="2">Item 2</li>
<li data-value="3">Item 3</li>
Expand All @@ -677,8 +677,8 @@ <h3>Force value/Listbox</h3>

<div data-example>
<combobox-framework data-listbox="true">
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="force-valuelistbox-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="force-valuelistbox-input" slot="list">
<li data-value="1">Item 1</li>
<li data-value="2">Item 2</li>
<li data-value="3">Item 3</li>
Expand All @@ -699,8 +699,8 @@ <h3>Limit suggested options</h3>

<div data-example>
<combobox-framework data-limit="2">
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="limit-suggested-options-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="limit-suggested-options-input" slot="list">
<li data-value="1">Item 1</li>
<li data-value="2">Item 2</li>
<li data-value="3">Item 3</li>
Expand Down Expand Up @@ -730,8 +730,8 @@ <h3 id="weighted-item-search">Weighted item search</h3>

<div data-example>
<combobox-framework>
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="weighted-item-search-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="weighted-item-search-input" slot="list">
<li data-value="1" data-display="Item 1" data-weight="5">Item 1</li>
<li data-value="2" data-display="Item 2" data-weight="1">Item 2</li>
<li data-value="3" data-display="Item 3" data-weight="1">Item 3</li>
Expand All @@ -752,8 +752,8 @@ <h3 id="change-events">Change events</h3>

<div data-example>
<combobox-framework onchange="console.log('Changed')">
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="change-events-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="change-events-input" slot="list">
<li data-value="1">Item 1</li>
<li data-value="2">Item 2</li>
<li data-value="3">Item 3</li>
Expand Down
44 changes: 22 additions & 22 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,8 @@ <h2>Demo</h2>

<label style="display: block;" for="demo-input">Select a cast member:</label>
<combobox-framework data-limit="20" data-fuse-options='{ "includeScore": true, "keys": ["dataset.search"]}'>
<input id="demo-input" placeholder="Click me" type="text" slot="input" />
<table slot="list">
<input id="demo-input" placeholder="Click me" type="text" slot="input" size="50" />
<table anchor="demo-input" slot="list">
<thead>
<tr>
<th>Name</th>
Expand Down Expand Up @@ -512,8 +512,8 @@ <h3>Simple list</h3>

<div data-example>
<combobox-framework>
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="simple-list-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="simple-list-input" slot="list">
<li data-value="1">Item 1</li>
<li data-value="2">Item 2</li>
<li data-value="3">Item 3</li>
Expand All @@ -534,8 +534,8 @@ <h3>Simple list with custom display data</h3>

<div data-example>
<combobox-framework>
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="custom-display-data-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="custom-display-data-input" slot="list">
<li data-value="1" data-display="Item 1">1</li>
<li data-value="2" data-display="Item 2">2</li>
<li data-value="3" data-display="Item 3">3</li>
Expand All @@ -556,8 +556,8 @@ <h3>List with nested elements</h3>

<div data-example>
<combobox-framework>
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="nested-elements-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="nested-elements-input" slot="list">
<li data-value="1" data-display="Item 1">
<div>Item 1</div>
</li>
Expand Down Expand Up @@ -586,8 +586,8 @@ <h3>Tabular data</h3>

<div data-example>
<combobox-framework>
<input placeholder="Click me" type="text" slot="input" />
<table slot="list">
<input id="tabular-data-input" placeholder="Click me" type="text" slot="input" />
<table anchor="tabular-data-input" slot="list">
<thead>
<th>Name</th>
<th>Number</th>
Expand Down Expand Up @@ -626,8 +626,8 @@ <h3>Preselected option</h3>

<div data-example>
<combobox-framework data-value="1">
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="preselected-option-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="preselected-option-input" slot="list">
<li data-value="1">Item 1</li>
<li data-value="2">Item 2</li>
<li data-value="3">Item 3</li>
Expand All @@ -654,8 +654,8 @@ <h3>Custom Fuse/Fuzzy search options</h3>

<div data-example>
<combobox-framework data-fuse-options='{ "includeScore": true, "keys": ["dataset.value"]}'>
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="fuse-options-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="fuse-options-input" slot="list">
<li data-value="1">Item 1</li>
<li data-value="2">Item 2</li>
<li data-value="3">Item 3</li>
Expand All @@ -677,8 +677,8 @@ <h3>Force value/Listbox</h3>

<div data-example>
<combobox-framework data-listbox="true">
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="force-valuelistbox-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="force-valuelistbox-input" slot="list">
<li data-value="1">Item 1</li>
<li data-value="2">Item 2</li>
<li data-value="3">Item 3</li>
Expand All @@ -699,8 +699,8 @@ <h3>Limit suggested options</h3>

<div data-example>
<combobox-framework data-limit="2">
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="limit-suggested-options-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="limit-suggested-options-input" slot="list">
<li data-value="1">Item 1</li>
<li data-value="2">Item 2</li>
<li data-value="3">Item 3</li>
Expand Down Expand Up @@ -730,8 +730,8 @@ <h3 id="weighted-item-search">Weighted item search</h3>

<div data-example>
<combobox-framework>
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="weighted-item-search-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="weighted-item-search-input" slot="list">
<li data-value="1" data-display="Item 1" data-weight="5">Item 1</li>
<li data-value="2" data-display="Item 2" data-weight="1">Item 2</li>
<li data-value="3" data-display="Item 3" data-weight="1">Item 3</li>
Expand All @@ -752,8 +752,8 @@ <h3 id="change-events">Change events</h3>

<div data-example>
<combobox-framework onchange="console.log('Changed')">
<input placeholder="Click me" type="text" slot="input" />
<ul slot="list">
<input id="change-events-input" placeholder="Click me" type="text" slot="input" />
<ul anchor="change-events-input" slot="list">
<li data-value="1">Item 1</li>
<li data-value="2">Item 2</li>
<li data-value="3">Item 3</li>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "1.1.2",
"version": "1.2.0",
"name": "combobox-framework",
"description": "A framework for building comboboxes",
"keywords": [
Expand Down
1 change: 0 additions & 1 deletion src/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,6 @@ export function setBasicAttributes(this: ComboboxFramework): void {
// #region Basic attributes for the list element
this._list!.setAttribute("role", "listbox");
this._list!.setAttribute("aria-multiselectable", "false");
this._list!.setAttribute("anchor", this._input!.id);
this._list!.tabIndex = -1;
// #endregion

Expand Down
1 change: 0 additions & 1 deletion test/helpers.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,6 @@ describe("setBasicAttributes", () => {

expect(combobox._list!.getAttribute("role")).toEqual("listbox");
expect(combobox._list!.getAttribute("aria-multiselectable")).toEqual("false");
expect(combobox._list!.getAttribute("anchor")).toEqual("input-element");
expect(combobox._list!.tabIndex).toEqual(-1);

const listItems = combobox._list!.querySelectorAll("li");
Expand Down

0 comments on commit 577580b

Please sign in to comment.