bard-tag_field 0.6.1 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d92384a9af02fa9c8fa45c4123231f664f72da247417574e87881895d8de82b0
-  data.tar.gz: d36533920260503358709949369202831b97f4d4689b6e2e87f3bcf3473dc95d
+  metadata.gz: c3d22221c1cc7dc87d084173f83e04a7a5307348c180d5ec4b7ecad432c6ba6e
+  data.tar.gz: 1dd1de41961bf59afa2b7a788871e39c785660a7cdc6ebf1b1eab8e54c9965ef
 SHA512:
-  metadata.gz: 3d94473aba5b1836f5e04fc82064b498abee2ee9e16f2d5fc80aa9f40d625542e1d8a5fcf6ee9fe9496599a51fc71e719e1fe1df3d147a3179aa38272ee94f97
-  data.tar.gz: 7c99f188ddfc97d05ce63b7f71339c621ae6e0d1b9ded309565cd7767ab6e63ceb07ae9672c800a1f54d2358f4c3512e026fb77b426eb82d3840525150f175a3
+  metadata.gz: 00b31b2872c1a9bd7df2c4ad1439625d44df574efa3ecbb4450a181eda11594815a469e51f505c6e5809c3992670eecb37d5d8309280f54d8c9656b5c7c236aa
+  data.tar.gz: 21bc20e35322cc29d63fe74ddecaacbb1d15a4eb66497c5a4d73722d52de6adf71984e199581c3f9bcc8335d8cd96d9d8a89634648bf1bbc75927d0f066f138a

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

@@ -1337,6 +1337,7 @@ class InputTag extends HTMLElement {
   reset() {
     this._taggle.removeAll();
     this._taggleInputTarget.value = '';
+    this._updateButtonContent();
   }
 
   get options() {
@@ -1437,11 +1438,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 +1457,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 +1484,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 +1496,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 +1573,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 +1616,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 +1637,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 +1859,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

@@ -341,6 +341,7 @@ class InputTag extends HTMLElement {
   reset() {
     this._taggle.removeAll()
     this._taggleInputTarget.value = ''
+    this._updateButtonContent()
   }
 
   get options() {
@@ -441,11 +442,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 +461,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 +488,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 +500,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 +577,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 +620,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 +641,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 +863,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.0"
   end
 end

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.0
 platform: ruby
 authors:
 - Micah Geisel
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-04-18 00:00:00.000000000 Z
+date: 2026-05-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails