bard-tag_field 0.6.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0c380354a1b112458aab6f246cb9ef7a0521e381d781e7483c0a9bfa313c0f28
-  data.tar.gz: 76952e1c29aab4a598817ea128017d94494b84402da2c23bb82ad8c64db65425
+  metadata.gz: c3d22221c1cc7dc87d084173f83e04a7a5307348c180d5ec4b7ecad432c6ba6e
+  data.tar.gz: 1dd1de41961bf59afa2b7a788871e39c785660a7cdc6ebf1b1eab8e54c9965ef
 SHA512:
-  metadata.gz: a30d75fa9bfc4ddd4e94613797224d8a71db5f0f1751401a953a96448dd25d87da2e8dc47c1bfed2db0c187e7856e5ca6f5eb2faf806b9516103c218e192d8d9
-  data.tar.gz: 84908e9d4ec5ee2c2e09ad387296b84ddb8236ce4e566036cfa8712c47913e435669805ed2a24ee04cedf7a22fd6a245f931ab89d0e7f93de14a6d84c4f35f94
+  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,22 +1457,20 @@ class InputTag extends HTMLElement {
 
     // Update visibility based on current state
     this.updateInputVisibility();
+    this._updateButtonContent();
   }
 
   setupAutocomplete() {
-    const optionsWithLabels = this._getOptionsWithLabels();
-
-    autocomplete({
+    this._autocompleteResult = autocomplete({
       input: this._taggleInputTarget,
       container: this.autocompleteContainerTarget,
       className: "ui-menu ui-autocomplete",
       fetch: (text, update) => {
         const currentTags = this._taggle.getTagValues();
-        const suggestions = optionsWithLabels.filter(option =>
+        const suggestions = this._getOptionsWithLabels().filter(option =>
           option.label.toLowerCase().includes(text.toLowerCase()) &&
           !currentTags.includes(option.value)
         );
-        // Store the suggestions for testing (can't assign to getter, tests read from DOM)
         update(suggestions);
       },
       render: item => {
@@ -1481,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
         }
 
@@ -1492,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);
@@ -1568,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) {
@@ -1584,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) {
@@ -1603,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) {
@@ -1824,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,22 +461,20 @@ class InputTag extends HTMLElement {
 
     // Update visibility based on current state
     this.updateInputVisibility()
+    this._updateButtonContent()
   }
 
   setupAutocomplete() {
-    const optionsWithLabels = this._getOptionsWithLabels()
-
-    autocomplete({
+    this._autocompleteResult = autocomplete({
       input: this._taggleInputTarget,
       container: this.autocompleteContainerTarget,
       className: "ui-menu ui-autocomplete",
       fetch: (text, update) => {
         const currentTags = this._taggle.getTagValues()
-        const suggestions = optionsWithLabels.filter(option =>
+        const suggestions = this._getOptionsWithLabels().filter(option =>
           option.label.toLowerCase().includes(text.toLowerCase()) &&
           !currentTags.includes(option.value)
         )
-        // Store the suggestions for testing (can't assign to getter, tests read from DOM)
         update(suggestions)
       },
       render: item => {
@@ -485,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
         }
 
@@ -496,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);
@@ -572,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) {
@@ -588,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) {
@@ -607,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) {
@@ -828,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'
@@ -179,6 +181,27 @@ describe('Autocomplete', () => {
       expect(inputTag._autocompleteSuggestions).to.not.include('React')
       expect(inputTag._autocompleteSuggestions).to.not.include('Vue')
     })
+
+    it('should include options added to the datalist after initialization', async () => {
+      document.body.innerHTML = `
+        <input-tag name="frameworks" list="late-datalist" multiple></input-tag>
+        <datalist id="late-datalist">
+          <option value="react">React</option>
+        </datalist>
+      `
+      const inputTag = document.querySelector('input-tag')
+      const datalist = document.querySelector('#late-datalist')
+      await waitForBasicInitialization(inputTag)
+
+      const newOption = document.createElement('option')
+      newOption.value = 'added'
+      newOption.textContent = 'Added'
+      datalist.appendChild(newOption)
+
+      await simulateInput(inputTag._taggleInputTarget, 'add')
+
+      expect(inputTag._autocompleteSuggestions).to.include('Added')
+    })
   })
 
   describe('Autocomplete Selection Behavior', () => {
@@ -612,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.0"
+    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.0
+  version: 0.7.0
 platform: ruby
 authors:
 - Micah Geisel
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-04-17 00:00:00.000000000 Z
+date: 2026-05-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails