bard-tag_field 0.4.2 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7a90b26ef508ec001cae14170b6ce96c543d6610c984622a1a2f3d9722c3e713
-  data.tar.gz: 5bafffc31b38325321042c768d96cb9d4b7f829a8d05f803d9f6bb96d38c85e1
+  metadata.gz: 41638b348c696d0f3f95ae6c6c485c53d83c24df043c705cbfb52045410eee6f
+  data.tar.gz: 581a77505a56ee7c545ec14f1fb856a99af95346f02af98ddddb4703fbbbcf3f
 SHA512:
-  metadata.gz: ca88e6931e551b19f280e6ecec610251c44b7778ebc88b93693ce3b9a3f05df800d9743b5bf58bf9d97f45bb542be0fae5e8a64ad6d04a5dbd813dac455eeb79
-  data.tar.gz: 61013f52ca3daadefc24a4d1a7f3346d392a31ebefd2c144ddd2490975d4a51a6d27d840fb818bdbdf463256661f1dd655915e7e6f2c237c5b4f99f16ad7e402
+  metadata.gz: c7056e3b6f96f40a4f4b704e10b626012e5d6df73b8c6f91e189e9238bf3a69260f768e2bbe2cdcde18b9a9c493f036e3e6b5b9b999be35e098ab617308e8681
+  data.tar.gz: ea50ae8634d86c7f796fbf636475dd6805e4446abdb0b486ad2b4e63b5d8c20b63d0fc1db76e6fed23f2c48a75733aa18ddc62ded5698676929e5d799b4db75b

data/Appraisals

@@ -10,4 +10,8 @@ end
 
 appraise "rails-8.0" do
   gem "rails", "~> 8.0.0"
-end
+end
+
+appraise "rails-8.1" do
+  gem "rails", "~> 8.1.0"
+end

data/CLAUDE.md

@@ -0,0 +1,109 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a Rails form helper gem that provides `tag_field` for creating interactive tag input fields. The gem wraps the [@botandrose/input-tag](https://github.com/botandrose/input-tag) custom element and integrates it with Rails form builders.
+
+**Key Architecture:**
+- `lib/bard/tag_field/form_builder.rb` - Rails form builder integration that handles method signature variants (like Rails' `select` helper)
+- `lib/bard/tag_field/field.rb` - Core field rendering logic, extends `ActionView::Helpers::Tags::TextField`
+- `lib/bard/tag_field.rb` - Rails Engine that auto-registers the form builder and precompiles JavaScript assets
+- `input-tag/` - JavaScript build directory using Rollup to bundle the `@botandrose/input-tag` package with Bun
+- `app/assets/javascripts/input-tag.js` - Compiled JavaScript output for Rails asset pipeline
+
+## Development Commands
+
+### Testing
+```bash
+# Run all tests
+bundle exec rspec
+
+# Run tests for specific Rails version
+bundle exec appraisal rails-7.1 rspec
+bundle exec appraisal rails-7.2 rspec
+bundle exec appraisal rails-8.0 rspec
+
+# Generate appraisal gemfiles after updating Appraisals
+bundle exec appraisal install
+```
+
+### JavaScript Assets
+```bash
+# Build JavaScript assets (required before running tests or releasing)
+cd input-tag && bun run build
+
+# Install Bun dependencies
+cd input-tag && bun install
+
+# Clean compiled assets
+cd input-tag && bun run clean
+```
+
+### Gem Management
+```bash
+# Install the gem locally for testing
+bundle exec rake install
+
+# Build gem package
+bundle exec rake build
+```
+
+## Form Builder Method Signatures
+
+The `tag_field` method supports multiple signatures to match Rails conventions:
+
+```ruby
+# Basic usage
+form.tag_field :tags
+
+# With HTML options only
+form.tag_field :tags, class: "form-control"
+
+# With choices (like form.select)
+form.tag_field :tags, ["ruby", "rails", "javascript"]
+
+# With choices and HTML options
+form.tag_field :tags, ["ruby", "rails"], {}, { class: "form-control" }
+
+# With nested choices [display, value]
+form.tag_field :categories, [["Web Dev", "web"], ["ML", "ml"]]
+
+# With block for custom rendering
+form.tag_field :tags do |options|
+  # Custom tag-option rendering
+end
+```
+
+The FormBuilder handles signature detection in lib/bard/tag_field/form_builder.rb:6-21.
+
+## Rendering Logic
+
+The Field class (lib/bard/tag_field/field.rb) handles three rendering scenarios:
+
+1. **Object values only** - Renders current object's tags as `<tag-option>` elements
+2. **With choices** - Renders object values as `<tag-option>` and choices in a nested `<datalist>`
+3. **With block** - Delegates content rendering to the provided block
+
+The `build_choice_map` method (lib/bard/tag_field/field.rb:58-74) maps choice values to display labels for proper tag rendering.
+
+## Testing
+
+Tests use RSpec with a custom HTML matcher that supports wildcards (`...`) for flexible HTML comparison. The matcher is defined in spec/spec_helper.rb:55-152 and allows testing HTML structure without exact whitespace or attribute order matching.
+
+Test setup includes a mock Rails application (TestApp) initialized in spec/spec_helper.rb:12-17.
+
+## JavaScript Build Process
+
+The gem bundles the `@botandrose/input-tag` package using Rollup with Bun:
+1. Source: `input-tag/index.js` imports from `@botandrose/input-tag`
+2. Build: `cd input-tag && bun run build` runs Rollup
+3. Output: `app/assets/javascripts/input-tag.js` for Rails asset pipeline
+4. The Engine precompiles this asset (lib/bard/tag_field.rb:11)
+
+**Important:** Always rebuild JavaScript assets after updating the `@botandrose/input-tag` dependency.
+
+## Multi-Rails Version Support
+
+Uses Appraisal gem to test against Rails 7.1, 7.2, and 8.0. Gemfiles are in `gemfiles/` directory. CI tests all combinations of Ruby 3.2/3.3/3.4 with each Rails version.

data/README.md

@@ -4,7 +4,7 @@
 [![Ruby](https://img.shields.io/badge/ruby-3.2%2B-red)](https://www.ruby-lang.org)
 [![Rails](https://img.shields.io/badge/rails-7.1%2B-red)](https://rubyonrails.org)
 
-A Rails form helper gem that adds `bard_tag_field` to your forms, creating interactive tag input fields using the [@botandrose/input-tag](https://github.com/botandrose/input-tag) custom element.
+A Rails form helper gem that adds `tag_field` to your forms, creating interactive tag input fields using the [@botandrose/input-tag](https://github.com/botandrose/input-tag) custom element.
 
 Perfect for adding tag functionality to your Rails forms with a clean, modern interface that works seamlessly with your existing Rails form helpers.
 
@@ -22,11 +22,11 @@ Perfect for adding tag functionality to your Rails forms with a clean, modern in
 
 ### Basic Usage
 
-After installing and requiring the gem, Use `bard_tag_field` in your Rails forms just like any other form helper:
+After installing and requiring the gem, Use `tag_field` in your Rails forms just like any other form helper:
 
 ```erb
 <%= form_with model: @post do |form| %>
-  <%= form.bard_tag_field :tags %>
+  <%= form.tag_field :tags %>
 <% end %>
 ```
 
@@ -37,7 +37,7 @@ This generates an interactive tag field that binds to your model's `tags` attrib
 Add CSS classes, data attributes, and other HTML options:
 
 ```erb
-<%= form.bard_tag_field :tags,
+<%= form.tag_field :tags,
     class: "form-control",
     id: "post-tags",
     data: { placeholder: "Add tags..." } %>
@@ -54,7 +54,7 @@ The field automatically displays existing tags from your model:
 
 ```erb
 <!-- Tags will be pre-populated in the form -->
-<%= form.bard_tag_field :tags %>
+<%= form.tag_field :tags %>
 ```
 
 ### With Predefined Choices (Rails select-style)
@@ -62,13 +62,13 @@ The field automatically displays existing tags from your model:
 Like `form.select`, you can provide predefined choices for users to select from:
 
 ```erb
-<%= form.bard_tag_field :tags, ["ruby", "rails", "javascript", "css"] %>
+<%= form.tag_field :tags, ["ruby", "rails", "javascript", "css"] %>
 ```
 
 Or use nested arrays for display vs submit values:
 
 ```erb
-<%= form.bard_tag_field :categories, [
+<%= form.tag_field :categories, [
   ["Web Development", "web-dev"],
   ["Machine Learning", "ml"],
   ["Database Design", "db"]
@@ -82,7 +82,7 @@ This creates a datalist with available options while still showing current objec
 Use blocks for custom tag rendering:
 
 ```erb
-<%= form.bard_tag_field :tags do |options| %>
+<%= form.tag_field :tags do |options| %>
   <% @post.tags.each do |tag| %>
     <tag-option value="<%= tag %>" class="custom-tag"><%= tag %></tag-option>
   <% end %>
@@ -128,7 +128,7 @@ end
 ```
 
 ```erb
-<%= form.bard_tag_field :tags_array %>
+<%= form.tag_field :tags_array %>
 ```
 
 ## Generated HTML
@@ -155,7 +155,7 @@ The gem generates semantic HTML using custom elements:
 
 ## JavaScript Integration
 
-This gem works with the [@botandrose/input-tag](https://github.com/botandrose/input-tag) custom element. Make sure to include it in your asset pipeline:
+This gem works with the [@botandrose/input-tag](https://github.com/botandrose/input-tag) custom element.
 
 ```javascript
 // In your application.js or wherever you manage JS
@@ -176,7 +176,7 @@ Or include the precompiled asset (automatically added by this gem):
 
 ## API Reference
 
-### `bard_tag_field(method, choices = nil, options = {}, html_options = {}, &block)`
+### `tag_field(method, choices = nil, options = {}, html_options = {}, &block)`
 
 **Parameters:**
 - `method` - The attribute name (symbol)
@@ -190,19 +190,19 @@ Or include the precompiled asset (automatically added by this gem):
 **Examples:**
 ```ruby
 # Basic usage
-form.bard_tag_field :tags
+form.tag_field :tags
 
 # With choices
-form.bard_tag_field :tags, ["ruby", "rails", "javascript"]
+form.tag_field :tags, ["ruby", "rails", "javascript"]
 
 # With nested choices (display vs value)
-form.bard_tag_field :categories, [["Web Dev", "web"], ["ML", "ml"]]
+form.tag_field :categories, [["Web Dev", "web"], ["ML", "ml"]]
 
 # With HTML options
-form.bard_tag_field :tags, class: "form-control", data: { max_tags: 5 }
+form.tag_field :tags, class: "form-control", data: { max_tags: 5 }
 
 # With choices and HTML options
-form.bard_tag_field :tags, ["ruby", "rails"], {}, { class: "form-control" }
+form.tag_field :tags, ["ruby", "rails"], {}, { class: "form-control" }
 ```
 
 ## Development

data/Rakefile

@@ -9,10 +9,10 @@ task default: :spec
 
 desc "Build JavaScript assets"
 task :build_js do
-  sh "cd bard-tag && npm run build"
+  sh "cd input-tag && bun run build"
 end
 
-desc "Install npm dependencies"
+desc "Install Bun dependencies"
 task :install_deps do
-  sh "cd bard-tag && npm install"
+  sh "cd input-tag && bun install"
 end

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

@@ -543,459 +543,459 @@ class Taggle {
   }
 }
 
-/**
- * Copyright (c) 2016 Denis Taran
- *
- * Homepage: https://smartscheduling.com/en/documentation/autocomplete
- * Source: https://github.com/denis-taran/autocomplete
- *
- * MIT License
- */
-function autocomplete(settings) {
-    // just an alias to minimize JS file size
-    var doc = document;
-    var container = settings.container || doc.createElement('div');
-    var preventSubmit = settings.preventSubmit || 0 /* Never */;
-    container.id = container.id || 'autocomplete-' + uid();
-    var containerStyle = container.style;
-    var debounceWaitMs = settings.debounceWaitMs || 0;
-    var disableAutoSelect = settings.disableAutoSelect || false;
-    var customContainerParent = container.parentElement;
-    var items = [];
-    var inputValue = '';
-    var minLen = 2;
-    var showOnFocus = settings.showOnFocus;
-    var selected;
-    var fetchCounter = 0;
-    var debounceTimer;
-    var destroyed = false;
-    // Fixes #104: autocomplete selection is broken on Firefox for Android
-    var suppressAutocomplete = false;
-    if (settings.minLength !== undefined) {
-        minLen = settings.minLength;
-    }
-    if (!settings.input) {
-        throw new Error('input undefined');
-    }
-    var input = settings.input;
-    container.className = [container.className, 'autocomplete', settings.className || ''].join(' ').trim();
-    container.setAttribute('role', 'listbox');
-    input.setAttribute('role', 'combobox');
-    input.setAttribute('aria-expanded', 'false');
-    input.setAttribute('aria-autocomplete', 'list');
-    input.setAttribute('aria-controls', container.id);
-    input.setAttribute('aria-owns', container.id);
-    input.setAttribute('aria-activedescendant', '');
-    input.setAttribute('aria-haspopup', 'listbox');
-    // IOS implementation for fixed positioning has many bugs, so we will use absolute positioning
-    containerStyle.position = 'absolute';
-    /**
-     * Generate a very complex textual ID that greatly reduces the chance of a collision with another ID or text.
-     */
-    function uid() {
-        return Date.now().toString(36) + Math.random().toString(36).substring(2);
-    }
-    /**
-     * Detach the container from DOM
-     */
-    function detach() {
-        var parent = container.parentNode;
-        if (parent) {
-            parent.removeChild(container);
-        }
-    }
-    /**
-     * Clear debouncing timer if assigned
-     */
-    function clearDebounceTimer() {
-        if (debounceTimer) {
-            window.clearTimeout(debounceTimer);
-        }
-    }
-    /**
-     * Attach the container to DOM
-     */
-    function attach() {
-        if (!container.parentNode) {
-            (customContainerParent || doc.body).appendChild(container);
-        }
-    }
-    /**
-     * Check if container for autocomplete is displayed
-     */
-    function containerDisplayed() {
-        return !!container.parentNode;
-    }
-    /**
-     * Clear autocomplete state and hide container
-     */
-    function clear() {
-        // prevent the update call if there are pending AJAX requests
-        fetchCounter++;
-        items = [];
-        inputValue = '';
-        selected = undefined;
-        input.setAttribute('aria-activedescendant', '');
-        input.setAttribute('aria-expanded', 'false');
-        detach();
-    }
-    /**
-     * Update autocomplete position
-     */
-    function updatePosition() {
-        if (!containerDisplayed()) {
-            return;
-        }
-        input.setAttribute('aria-expanded', 'true');
-        containerStyle.height = 'auto';
-        containerStyle.width = input.offsetWidth + 'px';
-        var maxHeight = 0;
-        var inputRect;
-        function calc() {
-            var docEl = doc.documentElement;
-            var clientTop = docEl.clientTop || doc.body.clientTop || 0;
-            var clientLeft = docEl.clientLeft || doc.body.clientLeft || 0;
-            var scrollTop = window.pageYOffset || docEl.scrollTop;
-            var scrollLeft = window.pageXOffset || docEl.scrollLeft;
-            inputRect = input.getBoundingClientRect();
-            var top = inputRect.top + input.offsetHeight + scrollTop - clientTop;
-            var left = inputRect.left + scrollLeft - clientLeft;
-            containerStyle.top = top + 'px';
-            containerStyle.left = left + 'px';
-            maxHeight = window.innerHeight - (inputRect.top + input.offsetHeight);
-            if (maxHeight < 0) {
-                maxHeight = 0;
-            }
-            containerStyle.top = top + 'px';
-            containerStyle.bottom = '';
-            containerStyle.left = left + 'px';
-            containerStyle.maxHeight = maxHeight + 'px';
-        }
-        // the calc method must be called twice, otherwise the calculation may be wrong on resize event (chrome browser)
-        calc();
-        calc();
-        if (settings.customize && inputRect) {
-            settings.customize(input, inputRect, container, maxHeight);
-        }
-    }
-    /**
-     * Redraw the autocomplete div element with suggestions
-     */
-    function update() {
-        container.textContent = '';
-        input.setAttribute('aria-activedescendant', '');
-        // function for rendering autocomplete suggestions
-        var render = function (item, _, __) {
-            var itemElement = doc.createElement('div');
-            itemElement.textContent = item.label || '';
-            return itemElement;
-        };
-        if (settings.render) {
-            render = settings.render;
-        }
-        // function to render autocomplete groups
-        var renderGroup = function (groupName, _) {
-            var groupDiv = doc.createElement('div');
-            groupDiv.textContent = groupName;
-            return groupDiv;
-        };
-        if (settings.renderGroup) {
-            renderGroup = settings.renderGroup;
-        }
-        var fragment = doc.createDocumentFragment();
-        var prevGroup = uid();
-        items.forEach(function (item, index) {
-            if (item.group && item.group !== prevGroup) {
-                prevGroup = item.group;
-                var groupDiv = renderGroup(item.group, inputValue);
-                if (groupDiv) {
-                    groupDiv.className += ' group';
-                    fragment.appendChild(groupDiv);
-                }
-            }
-            var div = render(item, inputValue, index);
-            if (div) {
-                div.id = container.id + "_" + index;
-                div.setAttribute('role', 'option');
-                div.addEventListener('click', function (ev) {
-                    suppressAutocomplete = true;
-                    try {
-                        settings.onSelect(item, input);
-                    }
-                    finally {
-                        suppressAutocomplete = false;
-                    }
-                    clear();
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                });
-                if (item === selected) {
-                    div.className += ' selected';
-                    div.setAttribute('aria-selected', 'true');
-                    input.setAttribute('aria-activedescendant', div.id);
-                }
-                fragment.appendChild(div);
-            }
-        });
-        container.appendChild(fragment);
-        if (items.length < 1) {
-            if (settings.emptyMsg) {
-                var empty = doc.createElement('div');
-                empty.id = container.id + "_" + uid();
-                empty.className = 'empty';
-                empty.textContent = settings.emptyMsg;
-                container.appendChild(empty);
-                input.setAttribute('aria-activedescendant', empty.id);
-            }
-            else {
-                clear();
-                return;
-            }
-        }
-        attach();
-        updatePosition();
-        updateScroll();
-    }
-    function updateIfDisplayed() {
-        if (containerDisplayed()) {
-            update();
-        }
-    }
-    function resizeEventHandler() {
-        updateIfDisplayed();
-    }
-    function scrollEventHandler(e) {
-        if (e.target !== container) {
-            updateIfDisplayed();
-        }
-        else {
-            e.preventDefault();
-        }
-    }
-    function inputEventHandler() {
-        if (!suppressAutocomplete) {
-            fetch(0 /* Keyboard */);
-        }
-    }
-    /**
-     * Automatically move scroll bar if selected item is not visible
-     */
-    function updateScroll() {
-        var elements = container.getElementsByClassName('selected');
-        if (elements.length > 0) {
-            var element = elements[0];
-            // make group visible
-            var previous = element.previousElementSibling;
-            if (previous && previous.className.indexOf('group') !== -1 && !previous.previousElementSibling) {
-                element = previous;
-            }
-            if (element.offsetTop < container.scrollTop) {
-                container.scrollTop = element.offsetTop;
-            }
-            else {
-                var selectBottom = element.offsetTop + element.offsetHeight;
-                var containerBottom = container.scrollTop + container.offsetHeight;
-                if (selectBottom > containerBottom) {
-                    container.scrollTop += selectBottom - containerBottom;
-                }
-            }
-        }
-    }
-    function selectPreviousSuggestion() {
-        var index = items.indexOf(selected);
-        selected = index === -1
-            ? undefined
-            : items[(index + items.length - 1) % items.length];
-        updateSelectedSuggestion(index);
-    }
-    function selectNextSuggestion() {
-        var index = items.indexOf(selected);
-        selected = items.length < 1
-            ? undefined
-            : index === -1
-                ? items[0]
-                : items[(index + 1) % items.length];
-        updateSelectedSuggestion(index);
-    }
-    function updateSelectedSuggestion(index) {
-        if (items.length > 0) {
-            unselectSuggestion(index);
-            selectSuggestion(items.indexOf(selected));
-            updateScroll();
-        }
-    }
-    function selectSuggestion(index) {
-        var element = doc.getElementById(container.id + "_" + index);
-        if (element) {
-            element.classList.add('selected');
-            element.setAttribute('aria-selected', 'true');
-            input.setAttribute('aria-activedescendant', element.id);
-        }
-    }
-    function unselectSuggestion(index) {
-        var element = doc.getElementById(container.id + "_" + index);
-        if (element) {
-            element.classList.remove('selected');
-            element.removeAttribute('aria-selected');
-            input.removeAttribute('aria-activedescendant');
-        }
-    }
-    function handleArrowAndEscapeKeys(ev, key) {
-        var containerIsDisplayed = containerDisplayed();
-        if (key === 'Escape') {
-            clear();
-        }
-        else {
-            if (!containerIsDisplayed || items.length < 1) {
-                return;
-            }
-            key === 'ArrowUp'
-                ? selectPreviousSuggestion()
-                : selectNextSuggestion();
-        }
-        ev.preventDefault();
-        if (containerIsDisplayed) {
-            ev.stopPropagation();
-        }
-    }
-    function handleEnterKey(ev) {
-        if (selected) {
-            if (preventSubmit === 2 /* OnSelect */) {
-                ev.preventDefault();
-            }
-            suppressAutocomplete = true;
-            try {
-                settings.onSelect(selected, input);
-            }
-            finally {
-                suppressAutocomplete = false;
-            }
-            clear();
-        }
-        if (preventSubmit === 1 /* Always */) {
-            ev.preventDefault();
-        }
-    }
-    function keydownEventHandler(ev) {
-        var key = ev.key;
-        switch (key) {
-            case 'ArrowUp':
-            case 'ArrowDown':
-            case 'Escape':
-                handleArrowAndEscapeKeys(ev, key);
-                break;
-            case 'Enter':
-                handleEnterKey(ev);
-                break;
-        }
-    }
-    function focusEventHandler() {
-        if (showOnFocus) {
-            fetch(1 /* Focus */);
-        }
-    }
-    function fetch(trigger) {
-        if (input.value.length >= minLen || trigger === 1 /* Focus */) {
-            clearDebounceTimer();
-            debounceTimer = window.setTimeout(function () { return startFetch(input.value, trigger, input.selectionStart || 0); }, trigger === 0 /* Keyboard */ || trigger === 2 /* Mouse */ ? debounceWaitMs : 0);
-        }
-        else {
-            clear();
-        }
-    }
-    function startFetch(inputText, trigger, cursorPos) {
-        if (destroyed)
-            return;
-        var savedFetchCounter = ++fetchCounter;
-        settings.fetch(inputText, function (elements) {
-            if (fetchCounter === savedFetchCounter && elements) {
-                items = elements;
-                inputValue = inputText;
-                selected = (items.length < 1 || disableAutoSelect) ? undefined : items[0];
-                update();
-            }
-        }, trigger, cursorPos);
-    }
-    function keyupEventHandler(e) {
-        if (settings.keyup) {
-            settings.keyup({
-                event: e,
-                fetch: function () { return fetch(0 /* Keyboard */); }
-            });
-            return;
-        }
-        if (!containerDisplayed() && e.key === 'ArrowDown') {
-            fetch(0 /* Keyboard */);
-        }
-    }
-    function clickEventHandler(e) {
-        settings.click && settings.click({
-            event: e,
-            fetch: function () { return fetch(2 /* Mouse */); }
-        });
-    }
-    function blurEventHandler() {
-        // when an item is selected by mouse click, the blur event will be initiated before the click event and remove DOM elements,
-        // so that the click event will never be triggered. In order to avoid this issue, DOM removal should be delayed.
-        setTimeout(function () {
-            if (doc.activeElement !== input) {
-                clear();
-            }
-        }, 200);
-    }
-    function manualFetch() {
-        startFetch(input.value, 3 /* Manual */, input.selectionStart || 0);
-    }
-    /**
-     * Fixes #26: on long clicks focus will be lost and onSelect method will not be called
-     */
-    container.addEventListener('mousedown', function (evt) {
-        evt.stopPropagation();
-        evt.preventDefault();
-    });
-    /**
-     * Fixes #30: autocomplete closes when scrollbar is clicked in IE
-     * See: https://stackoverflow.com/a/9210267/13172349
-     */
-    container.addEventListener('focus', function () { return input.focus(); });
-    // If the custom autocomplete container is already appended to the DOM during widget initialization, detach it.
-    detach();
-    /**
-     * This function will remove DOM elements and clear event handlers
-     */
-    function destroy() {
-        input.removeEventListener('focus', focusEventHandler);
-        input.removeEventListener('keyup', keyupEventHandler);
-        input.removeEventListener('click', clickEventHandler);
-        input.removeEventListener('keydown', keydownEventHandler);
-        input.removeEventListener('input', inputEventHandler);
-        input.removeEventListener('blur', blurEventHandler);
-        window.removeEventListener('resize', resizeEventHandler);
-        doc.removeEventListener('scroll', scrollEventHandler, true);
-        input.removeAttribute('role');
-        input.removeAttribute('aria-expanded');
-        input.removeAttribute('aria-autocomplete');
-        input.removeAttribute('aria-controls');
-        input.removeAttribute('aria-activedescendant');
-        input.removeAttribute('aria-owns');
-        input.removeAttribute('aria-haspopup');
-        clearDebounceTimer();
-        clear();
-        destroyed = true;
-    }
-    // setup event handlers
-    input.addEventListener('keyup', keyupEventHandler);
-    input.addEventListener('click', clickEventHandler);
-    input.addEventListener('keydown', keydownEventHandler);
-    input.addEventListener('input', inputEventHandler);
-    input.addEventListener('blur', blurEventHandler);
-    input.addEventListener('focus', focusEventHandler);
-    window.addEventListener('resize', resizeEventHandler);
-    doc.addEventListener('scroll', scrollEventHandler, true);
-    return {
-        destroy: destroy,
-        fetch: manualFetch
-    };
+/**
+ * Copyright (c) 2016 Denis Taran
+ *
+ * Homepage: https://smartscheduling.com/en/documentation/autocomplete
+ * Source: https://github.com/denis-taran/autocomplete
+ *
+ * MIT License
+ */
+function autocomplete(settings) {
+    // just an alias to minimize JS file size
+    var doc = document;
+    var container = settings.container || doc.createElement('div');
+    var preventSubmit = settings.preventSubmit || 0 /* Never */;
+    container.id = container.id || 'autocomplete-' + uid();
+    var containerStyle = container.style;
+    var debounceWaitMs = settings.debounceWaitMs || 0;
+    var disableAutoSelect = settings.disableAutoSelect || false;
+    var customContainerParent = container.parentElement;
+    var items = [];
+    var inputValue = '';
+    var minLen = 2;
+    var showOnFocus = settings.showOnFocus;
+    var selected;
+    var fetchCounter = 0;
+    var debounceTimer;
+    var destroyed = false;
+    // Fixes #104: autocomplete selection is broken on Firefox for Android
+    var suppressAutocomplete = false;
+    if (settings.minLength !== undefined) {
+        minLen = settings.minLength;
+    }
+    if (!settings.input) {
+        throw new Error('input undefined');
+    }
+    var input = settings.input;
+    container.className = [container.className, 'autocomplete', settings.className || ''].join(' ').trim();
+    container.setAttribute('role', 'listbox');
+    input.setAttribute('role', 'combobox');
+    input.setAttribute('aria-expanded', 'false');
+    input.setAttribute('aria-autocomplete', 'list');
+    input.setAttribute('aria-controls', container.id);
+    input.setAttribute('aria-owns', container.id);
+    input.setAttribute('aria-activedescendant', '');
+    input.setAttribute('aria-haspopup', 'listbox');
+    // IOS implementation for fixed positioning has many bugs, so we will use absolute positioning
+    containerStyle.position = 'absolute';
+    /**
+     * Generate a very complex textual ID that greatly reduces the chance of a collision with another ID or text.
+     */
+    function uid() {
+        return Date.now().toString(36) + Math.random().toString(36).substring(2);
+    }
+    /**
+     * Detach the container from DOM
+     */
+    function detach() {
+        var parent = container.parentNode;
+        if (parent) {
+            parent.removeChild(container);
+        }
+    }
+    /**
+     * Clear debouncing timer if assigned
+     */
+    function clearDebounceTimer() {
+        if (debounceTimer) {
+            window.clearTimeout(debounceTimer);
+        }
+    }
+    /**
+     * Attach the container to DOM
+     */
+    function attach() {
+        if (!container.parentNode) {
+            (customContainerParent || doc.body).appendChild(container);
+        }
+    }
+    /**
+     * Check if container for autocomplete is displayed
+     */
+    function containerDisplayed() {
+        return !!container.parentNode;
+    }
+    /**
+     * Clear autocomplete state and hide container
+     */
+    function clear() {
+        // prevent the update call if there are pending AJAX requests
+        fetchCounter++;
+        items = [];
+        inputValue = '';
+        selected = undefined;
+        input.setAttribute('aria-activedescendant', '');
+        input.setAttribute('aria-expanded', 'false');
+        detach();
+    }
+    /**
+     * Update autocomplete position
+     */
+    function updatePosition() {
+        if (!containerDisplayed()) {
+            return;
+        }
+        input.setAttribute('aria-expanded', 'true');
+        containerStyle.height = 'auto';
+        containerStyle.width = input.offsetWidth + 'px';
+        var maxHeight = 0;
+        var inputRect;
+        function calc() {
+            var docEl = doc.documentElement;
+            var clientTop = docEl.clientTop || doc.body.clientTop || 0;
+            var clientLeft = docEl.clientLeft || doc.body.clientLeft || 0;
+            var scrollTop = window.pageYOffset || docEl.scrollTop;
+            var scrollLeft = window.pageXOffset || docEl.scrollLeft;
+            inputRect = input.getBoundingClientRect();
+            var top = inputRect.top + input.offsetHeight + scrollTop - clientTop;
+            var left = inputRect.left + scrollLeft - clientLeft;
+            containerStyle.top = top + 'px';
+            containerStyle.left = left + 'px';
+            maxHeight = window.innerHeight - (inputRect.top + input.offsetHeight);
+            if (maxHeight < 0) {
+                maxHeight = 0;
+            }
+            containerStyle.top = top + 'px';
+            containerStyle.bottom = '';
+            containerStyle.left = left + 'px';
+            containerStyle.maxHeight = maxHeight + 'px';
+        }
+        // the calc method must be called twice, otherwise the calculation may be wrong on resize event (chrome browser)
+        calc();
+        calc();
+        if (settings.customize && inputRect) {
+            settings.customize(input, inputRect, container, maxHeight);
+        }
+    }
+    /**
+     * Redraw the autocomplete div element with suggestions
+     */
+    function update() {
+        container.textContent = '';
+        input.setAttribute('aria-activedescendant', '');
+        // function for rendering autocomplete suggestions
+        var render = function (item, _, __) {
+            var itemElement = doc.createElement('div');
+            itemElement.textContent = item.label || '';
+            return itemElement;
+        };
+        if (settings.render) {
+            render = settings.render;
+        }
+        // function to render autocomplete groups
+        var renderGroup = function (groupName, _) {
+            var groupDiv = doc.createElement('div');
+            groupDiv.textContent = groupName;
+            return groupDiv;
+        };
+        if (settings.renderGroup) {
+            renderGroup = settings.renderGroup;
+        }
+        var fragment = doc.createDocumentFragment();
+        var prevGroup = uid();
+        items.forEach(function (item, index) {
+            if (item.group && item.group !== prevGroup) {
+                prevGroup = item.group;
+                var groupDiv = renderGroup(item.group, inputValue);
+                if (groupDiv) {
+                    groupDiv.className += ' group';
+                    fragment.appendChild(groupDiv);
+                }
+            }
+            var div = render(item, inputValue, index);
+            if (div) {
+                div.id = container.id + "_" + index;
+                div.setAttribute('role', 'option');
+                div.addEventListener('click', function (ev) {
+                    suppressAutocomplete = true;
+                    try {
+                        settings.onSelect(item, input);
+                    }
+                    finally {
+                        suppressAutocomplete = false;
+                    }
+                    clear();
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                });
+                if (item === selected) {
+                    div.className += ' selected';
+                    div.setAttribute('aria-selected', 'true');
+                    input.setAttribute('aria-activedescendant', div.id);
+                }
+                fragment.appendChild(div);
+            }
+        });
+        container.appendChild(fragment);
+        if (items.length < 1) {
+            if (settings.emptyMsg) {
+                var empty = doc.createElement('div');
+                empty.id = container.id + "_" + uid();
+                empty.className = 'empty';
+                empty.textContent = settings.emptyMsg;
+                container.appendChild(empty);
+                input.setAttribute('aria-activedescendant', empty.id);
+            }
+            else {
+                clear();
+                return;
+            }
+        }
+        attach();
+        updatePosition();
+        updateScroll();
+    }
+    function updateIfDisplayed() {
+        if (containerDisplayed()) {
+            update();
+        }
+    }
+    function resizeEventHandler() {
+        updateIfDisplayed();
+    }
+    function scrollEventHandler(e) {
+        if (e.target !== container) {
+            updateIfDisplayed();
+        }
+        else {
+            e.preventDefault();
+        }
+    }
+    function inputEventHandler() {
+        if (!suppressAutocomplete) {
+            fetch(0 /* Keyboard */);
+        }
+    }
+    /**
+     * Automatically move scroll bar if selected item is not visible
+     */
+    function updateScroll() {
+        var elements = container.getElementsByClassName('selected');
+        if (elements.length > 0) {
+            var element = elements[0];
+            // make group visible
+            var previous = element.previousElementSibling;
+            if (previous && previous.className.indexOf('group') !== -1 && !previous.previousElementSibling) {
+                element = previous;
+            }
+            if (element.offsetTop < container.scrollTop) {
+                container.scrollTop = element.offsetTop;
+            }
+            else {
+                var selectBottom = element.offsetTop + element.offsetHeight;
+                var containerBottom = container.scrollTop + container.offsetHeight;
+                if (selectBottom > containerBottom) {
+                    container.scrollTop += selectBottom - containerBottom;
+                }
+            }
+        }
+    }
+    function selectPreviousSuggestion() {
+        var index = items.indexOf(selected);
+        selected = index === -1
+            ? undefined
+            : items[(index + items.length - 1) % items.length];
+        updateSelectedSuggestion(index);
+    }
+    function selectNextSuggestion() {
+        var index = items.indexOf(selected);
+        selected = items.length < 1
+            ? undefined
+            : index === -1
+                ? items[0]
+                : items[(index + 1) % items.length];
+        updateSelectedSuggestion(index);
+    }
+    function updateSelectedSuggestion(index) {
+        if (items.length > 0) {
+            unselectSuggestion(index);
+            selectSuggestion(items.indexOf(selected));
+            updateScroll();
+        }
+    }
+    function selectSuggestion(index) {
+        var element = doc.getElementById(container.id + "_" + index);
+        if (element) {
+            element.classList.add('selected');
+            element.setAttribute('aria-selected', 'true');
+            input.setAttribute('aria-activedescendant', element.id);
+        }
+    }
+    function unselectSuggestion(index) {
+        var element = doc.getElementById(container.id + "_" + index);
+        if (element) {
+            element.classList.remove('selected');
+            element.removeAttribute('aria-selected');
+            input.removeAttribute('aria-activedescendant');
+        }
+    }
+    function handleArrowAndEscapeKeys(ev, key) {
+        var containerIsDisplayed = containerDisplayed();
+        if (key === 'Escape') {
+            clear();
+        }
+        else {
+            if (!containerIsDisplayed || items.length < 1) {
+                return;
+            }
+            key === 'ArrowUp'
+                ? selectPreviousSuggestion()
+                : selectNextSuggestion();
+        }
+        ev.preventDefault();
+        if (containerIsDisplayed) {
+            ev.stopPropagation();
+        }
+    }
+    function handleEnterKey(ev) {
+        if (selected) {
+            if (preventSubmit === 2 /* OnSelect */) {
+                ev.preventDefault();
+            }
+            suppressAutocomplete = true;
+            try {
+                settings.onSelect(selected, input);
+            }
+            finally {
+                suppressAutocomplete = false;
+            }
+            clear();
+        }
+        if (preventSubmit === 1 /* Always */) {
+            ev.preventDefault();
+        }
+    }
+    function keydownEventHandler(ev) {
+        var key = ev.key;
+        switch (key) {
+            case 'ArrowUp':
+            case 'ArrowDown':
+            case 'Escape':
+                handleArrowAndEscapeKeys(ev, key);
+                break;
+            case 'Enter':
+                handleEnterKey(ev);
+                break;
+        }
+    }
+    function focusEventHandler() {
+        if (showOnFocus) {
+            fetch(1 /* Focus */);
+        }
+    }
+    function fetch(trigger) {
+        if (input.value.length >= minLen || trigger === 1 /* Focus */) {
+            clearDebounceTimer();
+            debounceTimer = window.setTimeout(function () { return startFetch(input.value, trigger, input.selectionStart || 0); }, trigger === 0 /* Keyboard */ || trigger === 2 /* Mouse */ ? debounceWaitMs : 0);
+        }
+        else {
+            clear();
+        }
+    }
+    function startFetch(inputText, trigger, cursorPos) {
+        if (destroyed)
+            return;
+        var savedFetchCounter = ++fetchCounter;
+        settings.fetch(inputText, function (elements) {
+            if (fetchCounter === savedFetchCounter && elements) {
+                items = elements;
+                inputValue = inputText;
+                selected = (items.length < 1 || disableAutoSelect) ? undefined : items[0];
+                update();
+            }
+        }, trigger, cursorPos);
+    }
+    function keyupEventHandler(e) {
+        if (settings.keyup) {
+            settings.keyup({
+                event: e,
+                fetch: function () { return fetch(0 /* Keyboard */); }
+            });
+            return;
+        }
+        if (!containerDisplayed() && e.key === 'ArrowDown') {
+            fetch(0 /* Keyboard */);
+        }
+    }
+    function clickEventHandler(e) {
+        settings.click && settings.click({
+            event: e,
+            fetch: function () { return fetch(2 /* Mouse */); }
+        });
+    }
+    function blurEventHandler() {
+        // when an item is selected by mouse click, the blur event will be initiated before the click event and remove DOM elements,
+        // so that the click event will never be triggered. In order to avoid this issue, DOM removal should be delayed.
+        setTimeout(function () {
+            if (doc.activeElement !== input) {
+                clear();
+            }
+        }, 200);
+    }
+    function manualFetch() {
+        startFetch(input.value, 3 /* Manual */, input.selectionStart || 0);
+    }
+    /**
+     * Fixes #26: on long clicks focus will be lost and onSelect method will not be called
+     */
+    container.addEventListener('mousedown', function (evt) {
+        evt.stopPropagation();
+        evt.preventDefault();
+    });
+    /**
+     * Fixes #30: autocomplete closes when scrollbar is clicked in IE
+     * See: https://stackoverflow.com/a/9210267/13172349
+     */
+    container.addEventListener('focus', function () { return input.focus(); });
+    // If the custom autocomplete container is already appended to the DOM during widget initialization, detach it.
+    detach();
+    /**
+     * This function will remove DOM elements and clear event handlers
+     */
+    function destroy() {
+        input.removeEventListener('focus', focusEventHandler);
+        input.removeEventListener('keyup', keyupEventHandler);
+        input.removeEventListener('click', clickEventHandler);
+        input.removeEventListener('keydown', keydownEventHandler);
+        input.removeEventListener('input', inputEventHandler);
+        input.removeEventListener('blur', blurEventHandler);
+        window.removeEventListener('resize', resizeEventHandler);
+        doc.removeEventListener('scroll', scrollEventHandler, true);
+        input.removeAttribute('role');
+        input.removeAttribute('aria-expanded');
+        input.removeAttribute('aria-autocomplete');
+        input.removeAttribute('aria-controls');
+        input.removeAttribute('aria-activedescendant');
+        input.removeAttribute('aria-owns');
+        input.removeAttribute('aria-haspopup');
+        clearDebounceTimer();
+        clear();
+        destroyed = true;
+    }
+    // setup event handlers
+    input.addEventListener('keyup', keyupEventHandler);
+    input.addEventListener('click', clickEventHandler);
+    input.addEventListener('keydown', keydownEventHandler);
+    input.addEventListener('input', inputEventHandler);
+    input.addEventListener('blur', blurEventHandler);
+    input.addEventListener('focus', focusEventHandler);
+    window.addEventListener('resize', resizeEventHandler);
+    doc.addEventListener('scroll', scrollEventHandler, true);
+    return {
+        destroy: destroy,
+        fetch: manualFetch
+    };
 }
 
 class TagOption extends HTMLElement {

data/gemfiles/rails_8.1.gemfile

@@ -0,0 +1,7 @@
+# This file was generated by Appraisal
+
+source "https://rubygems.org"
+
+gem "rails", "~> 8.1.0"
+
+gemspec path: "../"

data/{bard-tag → input-tag}/package.json

@@ -11,5 +11,6 @@
   },
   "dependencies": {
     "@botandrose/input-tag": "0.4.2"
-  }
+  },
+  "packageManager": "bun@latest"
 }

data/lib/bard/tag_field/form_builder.rb

@@ -3,19 +3,19 @@ require_relative "field"
 module Bard
   module TagField
     module FormBuilder
-      def bard_tag_field method, choices = nil, options = {}, html_options = {}, &block
+      def tag_field method, choices = nil, options = {}, html_options = {}, &block
         # Handle different method signatures to match Rails select helper
         case choices
         when Hash
-          # bard_tag_field(:method, { class: "form-control" })
+          # tag_field(:method, { class: "form-control" })
           html_options = options
           options = choices
           choices = nil
         when Array
-          # bard_tag_field(:method, choices_array, { class: "form-control" })
+          # tag_field(:method, choices_array, { class: "form-control" })
           html_options = options if options.is_a?(Hash)
         when NilClass
-          # bard_tag_field(:method)
+          # tag_field(:method)
           html_options = options
           options = {}
         end

data/lib/bard/tag_field/version.rb

@@ -2,6 +2,6 @@
 
 module Bard
   module TagField
-    VERSION = "0.4.2"
+    VERSION = "0.5.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bard-tag_field
 version: !ruby/object:Gem::Version
-  version: 0.4.2
+  version: 0.5.0
 platform: ruby
 authors:
 - Micah Geisel
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2025-10-19 00:00:00.000000000 Z
+date: 2025-10-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -75,22 +75,24 @@ extra_rdoc_files: []
 files:
 - ".rspec"
 - Appraisals
+- CLAUDE.md
 - Gemfile
 - LICENSE
 - README.md
 - Rakefile
 - app/assets/javascripts/input-tag.js
-- bard-tag/.gitignore
-- bard-tag/bun.lockb
-- bard-tag/index.js
-- bard-tag/package.json
-- bard-tag/rollup.config.js
 - bard-tag_field.gemspec
 - bin/console
 - bin/setup
 - gemfiles/rails_7.1.gemfile
 - gemfiles/rails_7.2.gemfile
 - gemfiles/rails_8.0.gemfile
+- gemfiles/rails_8.1.gemfile
+- input-tag/.gitignore
+- input-tag/bun.lockb
+- input-tag/index.js
+- input-tag/package.json
+- input-tag/rollup.config.js
 - lib/bard/tag_field.rb
 - lib/bard/tag_field/cucumber.rb
 - lib/bard/tag_field/field.rb