Merge pull request #14359 from craftcms/bugfix/14356-tags-field

Bugfix/14356 tags field

.github/ISSUE_TEMPLATE/BUG-REPORT-V3.yml

@@ -1,4 +1,4 @@
-name: "Bug Report: Craft 3"
+name: 'Bug Report: Craft 3'
 description: Report an issue or unexpected behavior pertaining to Craft 3
 title: '[3.x]: '
 labels:

.github/ISSUE_TEMPLATE/BUG-REPORT-V4.yml

@@ -1,4 +1,4 @@
-name: "Bug Report: Craft 4"
+name: 'Bug Report: Craft 4'
 description: Report an issue or unexpected behavior pertaining to Craft 4
 title: '[4.x]: '
 labels:

.github/ISSUE_TEMPLATE/BUG-REPORT-V5.yml

@@ -1,4 +1,4 @@
-name: "Bug Report: Craft 5"
+name: 'Bug Report: Craft 5'
 description: Report an issue or unexpected behavior pertaining to Craft 5
 title: '[5.x]: '
 labels:

.github/ISSUE_TEMPLATE/config.yml

@@ -15,27 +15,27 @@ contact_links:
   - name: Craft Stack Exchange
     url: https://craftcms.stackexchange.com/
     about: Get help and help others
-  - name: "Feature Request: Craft CMS"
+  - name: 'Feature Request: Craft CMS'
     url: https://github.com/craftcms/cms/discussions/new?category=ideas
     about: Make a feature request or enhancement for Craft CMS
-  - name: "Feature Request: Craft Console / Plugin Store"
+  - name: 'Feature Request: Craft Console / Plugin Store'
     url: https://github.com/craftcms/console/discussions/new?category=ideas
     about: Make a feature request or enhancement for Craft Console or the Plugin Store
-  - name: "Feature Request: Craft Cloud"
+  - name: 'Feature Request: Craft Cloud'
     url: https://github.com/craftcms/cloud/discussions/new?category=ideas
     about: Make a feature request or enhancement for Craft Cloud
-  - name: "Feature Request: Craft Commerce"
+  - name: 'Feature Request: Craft Commerce'
     url: https://github.com/craftcms/commerce/discussions/new?category=ideas
     about: Make a feature request or enhancement for Craft Commerce
-  - name: "Bug Report: Craft CMS"
+  - name: 'Bug Report: Craft CMS'
     url: https://github.com/craftcms/cms/issues/new/choose
     about: Create a bug report for Craft CMS
-  - name: "Bug Report: Craft Console / Plugin Store"
+  - name: 'Bug Report: Craft Console / Plugin Store'
     url: https://github.com/craftcms/console/issues/new/choose
     about: Create a bug report for Craft Console or the Plugin Store
-  - name: "Bug Report: Craft Cloud"
+  - name: 'Bug Report: Craft Cloud'
     url: https://craftcms.com/contact
     about: Create a bug report for Craft Cloud
-  - name: "Bug Report: Craft Commerce"
+  - name: 'Bug Report: Craft Commerce'
     url: https://github.com/craftcms/commerce/issues/new/choose
-    about: Create a bug report for Craft Commerce
+    about: Create a bug report for Craft Commerce

CHANGELOG.md

@@ -19,6 +19,7 @@
 - Fixed a bug where opening a disclosure menu wasn’t hiding others. ([#14354](https://github.com/craftcms/cms/issues/14354))
 - Fixed a bug where non-global custom fields were being shown on the Fields index page when searching. ([#14344](https://github.com/craftcms/cms/issues/14344))
 - Fixed a bug where component slideouts would open when long-pressing on a component’s action menu button or drag handle within a component select input.
+- Fixed various issues with Tags fields. ([#14356](https://github.com/craftcms/cms/issues/14356), [#14359](https://github.com/craftcms/cms/pull/14359))
 - Fixed a bug where read/write splitting was always getting disabled for GraphQL POST requests. ([#14324](https://github.com/craftcms/cms/issues/14324))
 - Fixed a bug where GraphQL schema edit pages could include empty category headings.
 - Fixed a bug where asset slideouts weren’t showing validation errors on the Filename field. ([#14329](https://github.com/craftcms/cms/issues/14329))

src/fields/Tags.php

@@ -125,6 +125,16 @@ protected function inputHtml(mixed $value, ?ElementInterface $element, bool $inl
         return '<p class="error">' . Craft::t('app', 'This field is not set to a valid source.') . '</p>';
     }
 
+    /**
+     * @inheritdoc
+     */
+    protected function supportedViewModes(): array
+    {
+        return [
+            'list' => Craft::t('app', 'List'),
+        ];
+    }
+
     /**
      * @inheritdoc
      */

src/templates/_components/fieldtypes/Tags/input.twig

@@ -9,14 +9,18 @@
 {% from "_includes/forms" import text %}
 
 <div id="{{ id }}" class="elementselect tagselect">
-    <div class="elements">
+    <ul class="elements">
+        {%- apply spaceless  %}
         {% for element in elements %}
-            {{ elementChip(element, {
-                context: 'field',
-                inputName: (name ?? false) ? "#{name}[]" : null,
-            }) }}
+            <li>
+                {{ elementChip(element, {
+                    context: 'field',
+                    inputName: (name ?? false) ? "#{name}[]" : null,
+                }) }}
+            </li>
         {% endfor %}
-    </div>
+        {% endapply -%}
+    </ul>
 
     <div class="texticon add icon">
         {{ text({

src/web/assets/cp/src/css/_main.scss

@@ -6572,11 +6572,14 @@ $min2ColWidth: 400px;
 /* tag select fields */
 .tagselect {
   .elements {
-    display: inline;
+    li {
+      display: inline;
+    }
   }
 
   .chip.small {
     clear: none;
+    @include margin-right(7px);
   }
 
   .add {

src/web/assets/cp/src/js/TagSelectInput.js

@@ -74,7 +74,7 @@ Craft.TagSelectInput = Craft.BaseElementSelectInput.extend(
                 let $nextOption = $hoverOption
                   .parent()
                   .nextAll()
-                  .find('a:not(.disabled)')
+                  .find('button:not(.disabled)')
                   .first();
                 if ($nextOption.length) {
                   this.focusOption($nextOption);
@@ -94,7 +94,7 @@ Craft.TagSelectInput = Craft.BaseElementSelectInput.extend(
                 let $prevOption = $hoverOption
                   .parent()
                   .prevAll()
-                  .find('a:not(.disabled)')
+                  .find('button:not(.disabled)')
                   .last();
                 if ($prevOption.length) {
                   this.focusOption($prevOption);
@@ -142,10 +142,12 @@ Craft.TagSelectInput = Craft.BaseElementSelectInput.extend(
     },
 
     // No "add" button
-    getAddElementsBtn: $.noop,
+    getAddElementsBtn: function () {
+      return [];
+    },
 
     getElementSortAxis: function () {
-      return null;
+      return 'x';
     },
 
     searchForTags: function () {
@@ -196,7 +198,7 @@ Craft.TagSelectInput = Craft.BaseElementSelectInput.extend(
             for (var i = 0; i < response.data.tags.length; i++) {
               $li = $('<li/>').appendTo($ul);
 
-              $('<a data-icon="tag"/>')
+              $('<button class="menu-item" data-icon="tag"/>')
                 .appendTo($li)
                 .text(response.data.tags[i].title)
                 .data('id', response.data.tags[i].id)
@@ -205,10 +207,12 @@ Craft.TagSelectInput = Craft.BaseElementSelectInput.extend(
 
             if (!response.data.exactMatch) {
               $li = $('<li/>').appendTo($ul);
-              $('<a data-icon="plus"/>').appendTo($li).text(data.search);
+              $('<button class="menu-item" data-icon="plus"/>')
+                .appendTo($li)
+                .text(data.search);
             }
 
-            $ul.find('a:not(.disabled):first').addClass('hover');
+            $ul.find('button:not(.disabled):first').addClass('hover');
 
             this.searchMenu = new Garnish.Menu($menu, {
               attachToElement: this.$addTagInput,
@@ -244,37 +248,43 @@ Craft.TagSelectInput = Craft.BaseElementSelectInput.extend(
       var id = $option.data('id');
       var title = $option.text();
 
-      var $element = $('<div/>', {
-        class: 'element small removable',
+      const $element = $('<div/>', {
+        class: 'chip element small removable',
         'data-id': id,
         'data-site-id': this.settings.targetSiteId,
         'data-label': title,
         'data-editable': '1',
-      }).appendTo(this.$elementsContainer);
+      });
 
-      var $input = $('<input/>', {
-        type: 'hidden',
-        name: this.settings.name + '[]',
-        value: id,
-      }).appendTo($element);
+      const $li = $('<li/>').appendTo(this.$elementsContainer);
+      $element.appendTo($li);
 
-      $('<button/>', {
-        class: 'delete icon',
-        title: Craft.t('app', 'Remove'),
-        type: 'button',
-        'aria-label': Craft.t('app', 'Remove {label}', {
-          label: title,
-        }),
+      var $chipContent = $('<div/>', {
+        class: 'chip-content',
       }).appendTo($element);
 
       var $titleContainer = $('<div/>', {
         class: 'label',
-      }).appendTo($element);
+      }).appendTo($chipContent);
+
+      var $labelLinkContainer = $('<a/>', {
+        class: 'label-link',
+      }).appendTo($titleContainer);
 
       $('<span/>', {
         class: 'title',
         text: title,
-      }).appendTo($titleContainer);
+      }).appendTo($labelLinkContainer);
+
+      var $chipActions = $('<div/>', {
+        class: 'chip-actions',
+      }).appendTo($chipContent);
+
+      var $input = $('<input/>', {
+        type: 'hidden',
+        name: this.settings.name + '[]',
+        value: id,
+      }).appendTo($chipContent);
 
       this.$elements = this.$elements.add($element);