bard-tag_field 0.6.1 → 0.7.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d92384a9af02fa9c8fa45c4123231f664f72da247417574e87881895d8de82b0
-  data.tar.gz: d36533920260503358709949369202831b97f4d4689b6e2e87f3bcf3473dc95d
+  metadata.gz: 273e3dda2a790b12547aa1aecc3b897fcf114f667fe5e3b5c0d991b41e61c24f
+  data.tar.gz: 12174ee0c8167b487dd2081b32220ac257874bf26e1cbaab1d51f7b422497b55
 SHA512:
-  metadata.gz: 3d94473aba5b1836f5e04fc82064b498abee2ee9e16f2d5fc80aa9f40d625542e1d8a5fcf6ee9fe9496599a51fc71e719e1fe1df3d147a3179aa38272ee94f97
-  data.tar.gz: 7c99f188ddfc97d05ce63b7f71339c621ae6e0d1b9ded309565cd7767ab6e63ceb07ae9672c800a1f54d2358f4c3512e026fb77b426eb82d3840525150f175a3
+  metadata.gz: 1ae7bf9a3ff6260c925d22a890581e1995dd6e1327002abb91f70f9064c3c339f34517b92e5cc2ef24d78fcad67873c5fbb991240815f85bb2acf74333c1ccf1
+  data.tar.gz: 43cbe858f1ecad6feed1fd80006bb3939af4c3c1963921973ae24c9cffb52eb67e3620d346b97a46d572325e7a889af07a1aedb78aa62b92899afb54227cafc7

data/README.md

@@ -168,6 +168,63 @@ Or include the precompiled asset (automatically added by this gem):
 //= require input-tag
 ```
 
+## Styling
+
+The custom element uses Shadow DOM, so its internals can't be reached with normal selectors. Theme it by overriding these CSS custom properties on `input-tag` (or any ancestor).
+
+### Tag (`<tag-option>`)
+
+| Variable | Default | Styles |
+| --- | --- | --- |
+| `--tag-option-bg` | `#588a00` | Tag background |
+| `--tag-option-color` | `#fff` | Tag label color |
+| `--tag-option-button-color` | `rgba(255, 255, 255, 0.6)` | Tag close-button color |
+
+### Container
+
+| Variable | Default | Styles |
+| --- | --- | --- |
+| `--container-bg` | `rgba(255, 255, 255, 0.8)` | Background of the input area |
+| `--container-border` | `#d0d0d0` | Border color (all sides) |
+| `--container-border-left-width` | `1px` | Left border width (override to add a focus/error accent stripe) |
+| `--container-border-left-color` | `#d0d0d0` | Left border color |
+| `--container-shadow` | `#ccc` | Inset shadow color |
+
+### Input
+
+| Variable | Default | Styles |
+| --- | --- | --- |
+| `--input-border` | `#d0d0d0` | Dashed border around the input |
+| `--input-bg` | `#fff` | Input background |
+| `--input-color` | `#333` | Input text color |
+
+### Suggestions toggle button
+
+| Variable | Default | Styles |
+| --- | --- | --- |
+| `--button-border` | `#e0e0e0` | Button border color |
+| `--button-color` | `#666` | Caret color |
+
+### Autocomplete menu
+
+| Variable | Default | Styles |
+| --- | --- | --- |
+| `--menu-shadow` | `#ccc` | Drop shadow color |
+| `--menu-bg` | `#fff` | Menu background |
+| `--menu-color` | `#555` | Menu item text color |
+| `--menu-hover` | `#e0e0e0` | Menu item hover background |
+
+### Example
+
+```css
+input-tag {
+  --tag-option-bg: #1f6feb;
+  --container-border: #ccd;
+  --container-border-left-width: 3px;
+  --container-border-left-color: #1f6feb;
+}
+```
+
 ## Browser Support
 
 - Modern browsers that support custom elements

data/app/assets/javascripts/input-tag.js

@@ -1001,7 +1001,7 @@ function autocomplete(settings) {
 const tagOptionStyleSheet = new CSSStyleSheet();
 tagOptionStyleSheet.replaceSync(`
   :host {
-    background: #588a00;
+    background: var(--tag-option-bg, #588a00);
     padding: 3px 10px 3px 10px !important;
     margin-right: 4px !important;
     margin-bottom: 2px !important;
@@ -1011,7 +1011,7 @@ tagOptionStyleSheet.replaceSync(`
     font-size: 14px;
     line-height: 1;
     min-height: 32px;
-    color: #fff;
+    color: var(--tag-option-color, #fff);
     text-transform: none;
     border-radius: 3px;
     position: relative;
@@ -1023,7 +1023,7 @@ tagOptionStyleSheet.replaceSync(`
     background: none;
     font-size: 20px;
     display: inline-block;
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--tag-option-button-color, rgba(255, 255, 255, 0.6));
     right: 10px;
     height: 100%;
     cursor: pointer;
@@ -1040,7 +1040,7 @@ inputTagStyleSheet.replaceSync(`
     padding: 0;
   }
   #container {
-    background: rgba(255, 255, 255, 0.8);
+    background: var(--container-bg, rgba(255, 255, 255, 0.8));
     padding: 6px 6px 3px;
     max-height: none;
     display: flex;
@@ -1050,9 +1050,11 @@ inputTagStyleSheet.replaceSync(`
     min-height: 48px;
     line-height: 48px;
     width: 100%;
-    border: 1px solid #d0d0d0;
+    border: 1px solid var(--container-border, #d0d0d0);
+    border-left-width: var(--container-border-left-width, 1px);
+    border-left-color: var(--container-border-left-color, #d0d0d0);
     outline: 1px solid transparent;
-    box-shadow: #ccc 0 1px 4px 0 inset;
+    box-shadow: var(--container-shadow, #ccc) 0 1px 4px 0 inset;
     border-radius: 2px;
     cursor: text;
     color: #333;
@@ -1072,21 +1074,21 @@ inputTagStyleSheet.replaceSync(`
     width: 100%;
     line-height: 2;
     padding: 0 0 0 10px;
-    border: 1px dashed #d0d0d0;
+    border: 1px dashed var(--input-border, #d0d0d0);
     outline: 1px solid transparent;
-    background: #fff;
+    background: var(--input-bg, #fff);
     box-shadow: none;
     border-radius: 2px;
     cursor: text;
-    color: #333;
+    color: var(--input-color, #333);
   }
   button {
     width: 38px;
     text-align: center;
     line-height: 36px;
-    border: 1px solid #e0e0e0;
+    border: 1px solid var(--button-border, #e0e0e0);
     font-size: 20px;
-    color: #666;
+    color: var(--button-color, #666);
     position: absolute !important;
     z-index: 10;
     right: 0px;
@@ -1111,11 +1113,11 @@ inputTagStyleSheet.replaceSync(`
   .ui-menu{
     margin: 0;
     padding: 6px;
-    box-shadow: #ccc 0 1px 6px;
+    box-shadow: var(--menu-shadow, #ccc) 0 1px 6px;
     z-index: 2;
     display: flex;
     flex-wrap: wrap;
-    background: #fff;
+    background: var(--menu-bg, #fff);
     list-style: none;
     font-size: 14px;
     min-width: 200px;
@@ -1130,10 +1132,10 @@ inputTagStyleSheet.replaceSync(`
     border-radius: 2px;
     width: auto;
     cursor: pointer;
-    color: #555;
+    color: var(--menu-color, #555);
   }
   .ui-menu .ui-menu-item::before{ display: none; }
-  .ui-menu .ui-menu-item:hover{ background: #e0e0e0; }
+  .ui-menu .ui-menu-item:hover{ background: var(--menu-hover, #e0e0e0); }
   .ui-state-active{
     padding: 0;
     border: none;
@@ -1337,6 +1339,7 @@ class InputTag extends HTMLElement {
   reset() {
     this._taggle.removeAll();
     this._taggleInputTarget.value = '';
+    this._updateButtonContent();
   }
 
   get options() {
@@ -1437,11 +1440,15 @@ class InputTag extends HTMLElement {
     this.checkRequired();
 
     this.buttonTarget = document.createElement("button");
+    this.buttonTarget.type = "button";
     this.buttonTarget.className = "add";
     this.buttonTarget.textContent = "+";
+    this.buttonTarget.addEventListener("mousedown", e => e.preventDefault());
     this.buttonTarget.addEventListener("click", e => this._add(e));
     this._taggleInputTarget.insertAdjacentElement("afterend", this.buttonTarget);
 
+    this._taggleInputTarget.addEventListener("input", () => this._updateButtonContent());
+
     this.autocompleteContainerTarget = document.createElement("ul");
     this._wrapperTarget.appendChild(this.autocompleteContainerTarget);
 
@@ -1452,10 +1459,11 @@ class InputTag extends HTMLElement {
 
     // Update visibility based on current state
     this.updateInputVisibility();
+    this._updateButtonContent();
   }
 
   setupAutocomplete() {
-    autocomplete({
+    this._autocompleteResult = autocomplete({
       input: this._taggleInputTarget,
       container: this.autocompleteContainerTarget,
       className: "ui-menu ui-autocomplete",
@@ -1478,6 +1486,7 @@ class InputTag extends HTMLElement {
         // Prevent adding multiple tags in single mode
         if (!this.multiple && this._taggle.getTagValues().length > 0) {
           this._taggleInputTarget.value = '';
+          this._updateButtonContent();
           return
         }
 
@@ -1489,8 +1498,9 @@ class InputTag extends HTMLElement {
 
         // Clear input
         this._taggleInputTarget.value = '';
+        this._updateButtonContent();
       },
-      minLength: 1,
+      minLength: 0,
       customize: (input, inputRect, container, maxHeight) => {
         // Position autocomplete below the input-tag container, accounting for dynamic height
         this._updateAutocompletePosition(container);
@@ -1565,8 +1575,35 @@ class InputTag extends HTMLElement {
 
   _add(event) {
     event.preventDefault();
-    this._taggle.add(this._taggleInputTarget.value);
+    const value = this._taggleInputTarget.value;
+    if (value === '') {
+      if (this._isAutocompleteOpen()) {
+        this._closeAutocomplete();
+      } else {
+        this._taggleInputTarget.focus();
+        this._autocompleteResult.fetch();
+      }
+      return
+    }
+    this._taggle.add(value);
     this._taggleInputTarget.value = '';
+    this._updateButtonContent();
+  }
+
+  _isAutocompleteOpen() {
+    return this._taggleInputTarget.getAttribute("aria-expanded") === "true"
+  }
+
+  _closeAutocomplete() {
+    this._taggleInputTarget.setAttribute("aria-expanded", "false");
+    this.autocompleteContainerTarget.remove();
+  }
+
+  _updateButtonContent() {
+    const isEmpty = !this._taggleInputTarget.value;
+    const currentTags = this._taggle.getTagValues();
+    const hasAvailableOption = this.options.some(value => !currentTags.includes(value));
+    this.buttonTarget.textContent = isEmpty && hasAvailableOption ? "▾" : "+";
   }
 
   onTagAdd(event, tag) {
@@ -1581,6 +1618,8 @@ class InputTag extends HTMLElement {
     this.syncValue();
     this.checkRequired();
     this.updateInputVisibility();
+    // Defer button update: taggle clears input.value after calling this callback
+    setTimeout(() => this._updateButtonContent(), 0);
 
     // Update autocomplete position if it's currently open
     if (this._autocompleteContainer) {
@@ -1600,6 +1639,7 @@ class InputTag extends HTMLElement {
     this.syncValue();
     this.checkRequired();
     this.updateInputVisibility();
+    this._updateButtonContent();
 
     // Update autocomplete position if it's currently open
     if (this._autocompleteContainer) {
@@ -1821,9 +1861,11 @@ class InputTag extends HTMLElement {
     this._taggleInputTarget.autocomplete = "off";
     this._taggleInputTarget.setAttribute("data-turbo-permanent", true);
     this._taggleInputTarget.addEventListener("keyup", e => this.keyup(e));
+    this._taggleInputTarget.addEventListener("input", () => this._updateButtonContent());
 
     // Re-setup autocomplete
     this.setupAutocomplete();
+    this._updateButtonContent();
 
     // Re-process existing tag options
     this.processTagOptions();

data/input-tag/src/input-tag.js

@@ -5,7 +5,7 @@ import autocomplete from "autocompleter"
 const tagOptionStyleSheet = new CSSStyleSheet()
 tagOptionStyleSheet.replaceSync(`
   :host {
-    background: #588a00;
+    background: var(--tag-option-bg, #588a00);
     padding: 3px 10px 3px 10px !important;
     margin-right: 4px !important;
     margin-bottom: 2px !important;
@@ -15,7 +15,7 @@ tagOptionStyleSheet.replaceSync(`
     font-size: 14px;
     line-height: 1;
     min-height: 32px;
-    color: #fff;
+    color: var(--tag-option-color, #fff);
     text-transform: none;
     border-radius: 3px;
     position: relative;
@@ -27,7 +27,7 @@ tagOptionStyleSheet.replaceSync(`
     background: none;
     font-size: 20px;
     display: inline-block;
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--tag-option-button-color, rgba(255, 255, 255, 0.6));
     right: 10px;
     height: 100%;
     cursor: pointer;
@@ -44,7 +44,7 @@ inputTagStyleSheet.replaceSync(`
     padding: 0;
   }
   #container {
-    background: rgba(255, 255, 255, 0.8);
+    background: var(--container-bg, rgba(255, 255, 255, 0.8));
     padding: 6px 6px 3px;
     max-height: none;
     display: flex;
@@ -54,9 +54,11 @@ inputTagStyleSheet.replaceSync(`
     min-height: 48px;
     line-height: 48px;
     width: 100%;
-    border: 1px solid #d0d0d0;
+    border: 1px solid var(--container-border, #d0d0d0);
+    border-left-width: var(--container-border-left-width, 1px);
+    border-left-color: var(--container-border-left-color, #d0d0d0);
     outline: 1px solid transparent;
-    box-shadow: #ccc 0 1px 4px 0 inset;
+    box-shadow: var(--container-shadow, #ccc) 0 1px 4px 0 inset;
     border-radius: 2px;
     cursor: text;
     color: #333;
@@ -76,21 +78,21 @@ inputTagStyleSheet.replaceSync(`
     width: 100%;
     line-height: 2;
     padding: 0 0 0 10px;
-    border: 1px dashed #d0d0d0;
+    border: 1px dashed var(--input-border, #d0d0d0);
     outline: 1px solid transparent;
-    background: #fff;
+    background: var(--input-bg, #fff);
     box-shadow: none;
     border-radius: 2px;
     cursor: text;
-    color: #333;
+    color: var(--input-color, #333);
   }
   button {
     width: 38px;
     text-align: center;
     line-height: 36px;
-    border: 1px solid #e0e0e0;
+    border: 1px solid var(--button-border, #e0e0e0);
     font-size: 20px;
-    color: #666;
+    color: var(--button-color, #666);
     position: absolute !important;
     z-index: 10;
     right: 0px;
@@ -115,11 +117,11 @@ inputTagStyleSheet.replaceSync(`
   .ui-menu{
     margin: 0;
     padding: 6px;
-    box-shadow: #ccc 0 1px 6px;
+    box-shadow: var(--menu-shadow, #ccc) 0 1px 6px;
     z-index: 2;
     display: flex;
     flex-wrap: wrap;
-    background: #fff;
+    background: var(--menu-bg, #fff);
     list-style: none;
     font-size: 14px;
     min-width: 200px;
@@ -134,10 +136,10 @@ inputTagStyleSheet.replaceSync(`
     border-radius: 2px;
     width: auto;
     cursor: pointer;
-    color: #555;
+    color: var(--menu-color, #555);
   }
   .ui-menu .ui-menu-item::before{ display: none; }
-  .ui-menu .ui-menu-item:hover{ background: #e0e0e0; }
+  .ui-menu .ui-menu-item:hover{ background: var(--menu-hover, #e0e0e0); }
   .ui-state-active{
     padding: 0;
     border: none;
@@ -341,6 +343,7 @@ class InputTag extends HTMLElement {
   reset() {
     this._taggle.removeAll()
     this._taggleInputTarget.value = ''
+    this._updateButtonContent()
   }
 
   get options() {
@@ -441,11 +444,15 @@ class InputTag extends HTMLElement {
     this.checkRequired()
 
     this.buttonTarget = document.createElement("button")
+    this.buttonTarget.type = "button"
     this.buttonTarget.className = "add"
     this.buttonTarget.textContent = "+"
+    this.buttonTarget.addEventListener("mousedown", e => e.preventDefault())
     this.buttonTarget.addEventListener("click", e => this._add(e))
     this._taggleInputTarget.insertAdjacentElement("afterend", this.buttonTarget)
 
+    this._taggleInputTarget.addEventListener("input", () => this._updateButtonContent())
+
     this.autocompleteContainerTarget = document.createElement("ul");
     this._wrapperTarget.appendChild(this.autocompleteContainerTarget)
 
@@ -456,10 +463,11 @@ class InputTag extends HTMLElement {
 
     // Update visibility based on current state
     this.updateInputVisibility()
+    this._updateButtonContent()
   }
 
   setupAutocomplete() {
-    autocomplete({
+    this._autocompleteResult = autocomplete({
       input: this._taggleInputTarget,
       container: this.autocompleteContainerTarget,
       className: "ui-menu ui-autocomplete",
@@ -482,6 +490,7 @@ class InputTag extends HTMLElement {
         // Prevent adding multiple tags in single mode
         if (!this.multiple && this._taggle.getTagValues().length > 0) {
           this._taggleInputTarget.value = ''
+          this._updateButtonContent()
           return
         }
 
@@ -493,8 +502,9 @@ class InputTag extends HTMLElement {
 
         // Clear input
         this._taggleInputTarget.value = ''
+        this._updateButtonContent()
       },
-      minLength: 1,
+      minLength: 0,
       customize: (input, inputRect, container, maxHeight) => {
         // Position autocomplete below the input-tag container, accounting for dynamic height
         this._updateAutocompletePosition(container);
@@ -569,8 +579,35 @@ class InputTag extends HTMLElement {
 
   _add(event) {
     event.preventDefault()
-    this._taggle.add(this._taggleInputTarget.value)
+    const value = this._taggleInputTarget.value
+    if (value === '') {
+      if (this._isAutocompleteOpen()) {
+        this._closeAutocomplete()
+      } else {
+        this._taggleInputTarget.focus()
+        this._autocompleteResult.fetch()
+      }
+      return
+    }
+    this._taggle.add(value)
     this._taggleInputTarget.value = ''
+    this._updateButtonContent()
+  }
+
+  _isAutocompleteOpen() {
+    return this._taggleInputTarget.getAttribute("aria-expanded") === "true"
+  }
+
+  _closeAutocomplete() {
+    this._taggleInputTarget.setAttribute("aria-expanded", "false")
+    this.autocompleteContainerTarget.remove()
+  }
+
+  _updateButtonContent() {
+    const isEmpty = !this._taggleInputTarget.value
+    const currentTags = this._taggle.getTagValues()
+    const hasAvailableOption = this.options.some(value => !currentTags.includes(value))
+    this.buttonTarget.textContent = isEmpty && hasAvailableOption ? "▾" : "+"
   }
 
   onTagAdd(event, tag) {
@@ -585,6 +622,8 @@ class InputTag extends HTMLElement {
     this.syncValue()
     this.checkRequired()
     this.updateInputVisibility()
+    // Defer button update: taggle clears input.value after calling this callback
+    setTimeout(() => this._updateButtonContent(), 0)
 
     // Update autocomplete position if it's currently open
     if (this._autocompleteContainer) {
@@ -604,6 +643,7 @@ class InputTag extends HTMLElement {
     this.syncValue()
     this.checkRequired()
     this.updateInputVisibility()
+    this._updateButtonContent()
 
     // Update autocomplete position if it's currently open
     if (this._autocompleteContainer) {
@@ -825,9 +865,11 @@ class InputTag extends HTMLElement {
     this._taggleInputTarget.autocomplete = "off";
     this._taggleInputTarget.setAttribute("data-turbo-permanent", true);
     this._taggleInputTarget.addEventListener("keyup", e => this.keyup(e));
+    this._taggleInputTarget.addEventListener("input", () => this._updateButtonContent());
 
     // Re-setup autocomplete
     this.setupAutocomplete();
+    this._updateButtonContent();
 
     // Re-process existing tag options
     this.processTagOptions();

data/input-tag/test/autocomplete.test.js

@@ -7,6 +7,8 @@ import {
   waitForBasicInitialization,
   waitForUpdate,
   simulateInput,
+  simulateKeyup,
+  simulateClick,
   getTagElements,
   getTagValues
 } from './lib/test-utils.js'
@@ -633,4 +635,165 @@ describe('Autocomplete', () => {
       expect(getTagValues(inputTag)).to.deep.equal(['option1'])
     })
   })
+
+  describe('Dropdown on Empty Input', () => {
+    async function setupDropdownTest() {
+      document.body.innerHTML = `
+        <input-tag name="frameworks" list="suggestions" multiple></input-tag>
+        <datalist id="suggestions">
+          <option value="react">React</option>
+          <option value="vue">Vue</option>
+          <option value="angular">Angular</option>
+        </datalist>
+      `
+      const inputTag = document.querySelector('input-tag')
+      await waitForBasicInitialization(inputTag)
+      return inputTag
+    }
+
+    it('should show all options on ArrowDown when input is empty', async () => {
+      const inputTag = await setupDropdownTest()
+      const input = inputTag._taggleInputTarget
+
+      simulateKeyup(input, 40, { key: 'ArrowDown' })
+      await waitForUpdate()
+
+      expect(inputTag._autocompleteSuggestions).to.include.members(['React', 'Vue', 'Angular'])
+    })
+
+    it('should exclude already-selected tags from ArrowDown dropdown', async () => {
+      const inputTag = await setupDropdownTest()
+      inputTag.add('react')
+      await waitForUpdate()
+      const input = inputTag._taggleInputTarget
+
+      simulateKeyup(input, 40, { key: 'ArrowDown' })
+      await waitForUpdate()
+
+      expect(inputTag._autocompleteSuggestions).to.include.members(['Vue', 'Angular'])
+      expect(inputTag._autocompleteSuggestions).to.not.include('React')
+    })
+
+    it('should show down chevron on the button when input is empty', async () => {
+      const inputTag = await setupDropdownTest()
+
+      expect(inputTag.buttonTarget.textContent).to.equal('▾')
+    })
+
+    it('should keep + button when there are no autocomplete options', async () => {
+      const inputTag = await setupInputTag('<input-tag name="tags" multiple></input-tag>')
+
+      expect(inputTag.buttonTarget.textContent).to.equal('+')
+    })
+
+    it('should keep + button when datalist is empty', async () => {
+      document.body.innerHTML = `
+        <input-tag name="tags" list="empty" multiple></input-tag>
+        <datalist id="empty"></datalist>
+      `
+      const inputTag = document.querySelector('input-tag')
+      await waitForBasicInitialization(inputTag)
+
+      expect(inputTag.buttonTarget.textContent).to.equal('+')
+    })
+
+    it('should swap to + when all datalist options are already selected', async () => {
+      const inputTag = await setupDropdownTest()
+
+      expect(inputTag.buttonTarget.textContent).to.equal('▾')
+
+      inputTag.add('react')
+      inputTag.add('vue')
+      inputTag.add('angular')
+      await waitForUpdate()
+
+      expect(inputTag.buttonTarget.textContent).to.equal('+')
+    })
+
+    it('should close the dropdown when chevron is clicked while open', async () => {
+      const inputTag = await setupDropdownTest()
+      const input = inputTag._taggleInputTarget
+
+      simulateClick(inputTag.buttonTarget)
+      await waitForUpdate()
+      expect(input.getAttribute('aria-expanded')).to.equal('true')
+
+      simulateClick(inputTag.buttonTarget)
+      await waitForUpdate()
+
+      expect(input.getAttribute('aria-expanded')).to.equal('false')
+    })
+
+    it('should swap back to chevron after removing a tag frees an option', async () => {
+      const inputTag = await setupDropdownTest()
+
+      inputTag.add('react')
+      inputTag.add('vue')
+      inputTag.add('angular')
+      await waitForUpdate()
+      expect(inputTag.buttonTarget.textContent).to.equal('+')
+
+      inputTag.remove('react')
+      await waitForUpdate()
+
+      expect(inputTag.buttonTarget.textContent).to.equal('▾')
+    })
+
+    it('should show + on the button when input has text', async () => {
+      const inputTag = await setupDropdownTest()
+      const input = inputTag._taggleInputTarget
+
+      await simulateInput(input, 'r')
+
+      expect(inputTag.buttonTarget.textContent).to.equal('+')
+    })
+
+    it('should swap button content as input changes', async () => {
+      const inputTag = await setupDropdownTest()
+      const input = inputTag._taggleInputTarget
+
+      expect(inputTag.buttonTarget.textContent).to.equal('▾')
+
+      await simulateInput(input, 'react')
+      expect(inputTag.buttonTarget.textContent).to.equal('+')
+
+      await simulateInput(input, '')
+      expect(inputTag.buttonTarget.textContent).to.equal('▾')
+    })
+
+    it('should open autocomplete dropdown when chevron is clicked', async () => {
+      const inputTag = await setupDropdownTest()
+
+      simulateClick(inputTag.buttonTarget)
+      await waitForUpdate()
+
+      expect(inputTag._autocompleteSuggestions).to.include.members(['React', 'Vue', 'Angular'])
+    })
+
+    it('should still add typed text as tag when + button is clicked', async () => {
+      const inputTag = await setupDropdownTest()
+      const input = inputTag._taggleInputTarget
+
+      await simulateInput(input, 'custom-tag')
+      simulateClick(inputTag.buttonTarget)
+      await waitForUpdate()
+
+      expect(getTagValues(inputTag)).to.include('custom-tag')
+      expect(input.value).to.equal('')
+      expect(inputTag.buttonTarget.textContent).to.equal('▾')
+    })
+
+    it('should show chevron again after a tag is added', async () => {
+      const inputTag = await setupDropdownTest()
+      const input = inputTag._taggleInputTarget
+
+      await simulateInput(input, 'react')
+      expect(inputTag.buttonTarget.textContent).to.equal('+')
+
+      inputTag.add('react')
+      await waitForUpdate()
+
+      expect(inputTag.buttonTarget.textContent).to.equal('▾')
+    })
+  })
 })

data/lib/bard/tag_field/version.rb

@@ -2,6 +2,6 @@
 
 module Bard
   module TagField
-    VERSION = "0.6.1"
+    VERSION = "0.7.1"
   end
 end

data/lib/bard-tag_field.rb

@@ -0,0 +1 @@
+require "bard/tag_field"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bard-tag_field
 version: !ruby/object:Gem::Version
-  version: 0.6.1
+  version: 0.7.1
 platform: ruby
 authors:
 - Micah Geisel
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-04-18 00:00:00.000000000 Z
+date: 2026-05-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -183,6 +183,7 @@ files:
 - input-tag/test/nested-datalist.test.js
 - input-tag/test/value-label-separation.test.js
 - input-tag/web-test-runner.config.mjs
+- lib/bard-tag_field.rb
 - lib/bard/tag_field.rb
 - lib/bard/tag_field/cucumber.rb
 - lib/bard/tag_field/field.rb