tramway 4.1 → 4.1.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a20badcbb5b3d0d460bbadafb95816d4932ce5e8af0d41a9ce2315507220bed0
-  data.tar.gz: 800c9136a41a012e3b8581611afa70e666f81c4dab9d331cc7c094d096cb2b86
+  metadata.gz: b7992bbaa872dc64b21203cb0350463136687e0bfe033a1b461c87bf15804f6b
+  data.tar.gz: 24024ccfa23c7e0718a8dcfd708ce4fcfe232e67c352e5fa28360b017f0b323e
 SHA512:
-  metadata.gz: 84e42fc4f2acf64a31007add38185688e84d9728873a528a1d1b787b5b7383e94b5b7ff22ee62c0040eb75f0daae50d0d1c182f68424a39919e3f4ee2ef90a92
-  data.tar.gz: de23a5e5b76877268ce42d2371f5db9907c3ce6a517b15ea7b234a2ecc944c6a04fb3b70001b098ab06b07d52f25fdeae1a36ec9112eb2530be0394f719354d2
+  metadata.gz: 5a8e09bf7ab1d4c09d881f87d99cd1ab5841e92b29a17e2bab144bc009e70263af0cf3ffc71930a027dd589beb13f50c933f4ffcc9fb292e3c36e75f2015b699
+  data.tar.gz: 0110e0d22d0f745d459021d97b929ed4915e08d292a706d7a06dd0c409cd2426c42f2fdb0e40af5ef243e1609b8c37c5ad20204c38b7d16db4f4d0f9d5599b89

data/README.md

@@ -1563,10 +1563,19 @@ Autocomplete select example:
 <% end %>
 ```
 
-`autocomplete: true` renders an autocomplete-enabled select. It cannot be used together with `multiselect: true` in the
-same select field.
+`autocomplete: true` renders an autocomplete-enabled select. It can be combined with `multiple: true` to get a
+searchable multi-select:
 
-When you use `multiselect: true`, make sure any preselected values still exist in the collection you render. Unknown
+```erb
+<%= tramway_form_for @user do |f| %>
+  <%= f.select :departments, [['Engineering', 'engineering'], ['Sales', 'sales']], autocomplete: true, multiple: true %>
+<% end %>
+```
+
+With both options set, the search input stays visible after each selection so you can keep filtering and picking
+more options; selected options still show as removable tags.
+
+When you use `multiple: true`, make sure any preselected values still exist in the collection you render. Unknown
 values are ignored by the widget so the select can still boot safely.
 
 **Examples**

data/app/assets/javascripts/tramway/tramway.js

@@ -26,7 +26,7 @@ class TramwaySelect extends Controller {
     this.items = JSON.parse(this.element.dataset.items).map((item, index) => {
       return {
         index,
-        text: item.text,
+        text: item.text == null ? '' : item.text.toString(),
         value: item.value.toString(),
         selected: false
       }
@@ -59,7 +59,7 @@ class TramwaySelect extends Controller {
 
     let content = allItems;
 
-    if (this.autocomplete() && this.selectedItems.length === 0) {
+    if (this.autocomplete() && (this.multiple() || this.selectedItems.length === 0)) {
       content += this.element.dataset.autocompleteInput;
     }
 
@@ -80,7 +80,14 @@ class TramwaySelect extends Controller {
     }
   }
 
-  toggleDropdown() {
+  toggleDropdown(event) {
+    // Clicking into the autocomplete search input bubbles up to this action. While the dropdown
+    // is already open, that click should keep it open (so the user can keep typing/selecting)
+    // rather than close it on every refocus.
+    if (this.dropdownState === 'open' && event && event.target.tagName === 'INPUT') {
+      return;
+    }
+
     if (this.dropdownState === 'closed') {
       this.openDropdown();
     } else {
@@ -103,6 +110,14 @@ class TramwaySelect extends Controller {
 
     this.caretDownTarget.classList.add('hidden');
     this.caretUpTarget.classList.remove('hidden');
+
+    if (this.autocomplete()) {
+      this.searchInput()?.focus();
+    }
+  }
+
+  searchInput() {
+    return this.showSelectedAreaTarget.querySelector('input');
   }
 
   dropdown() {

data/lib/tramway/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Tramway
-  VERSION = '4.1'
+  VERSION = '4.1.0.1'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tramway
 version: !ruby/object:Gem::Version
-  version: '4.1'
+  version: 4.1.0.1
 platform: ruby
 authors:
 - kalashnikovisme