Merge pull request #1175 from Choices-js/conditional-item-select-text

If itemSelectText is an empty, do not reserve space for the "press to select" text phrase. Resolves #820

README.md

@@ -675,7 +675,7 @@ For backward compatibility, `<option value="">This is a placeholder</option>` an
 
 **Input types affected:** `select-multiple`, `select-one`
 
-**Usage:** The text that is shown when a user hovers over a selectable choice.
+**Usage:** The text that is shown when a user hovers over a selectable choice. Set to empty to not reserve space for this text.
 
 ### addItemText
 

public/assets/scripts/choices.js

@@ -3181,7 +3181,9 @@
             dataset.choice = '';
             dataset.id = choice.id;
             dataset.value = rawValue;
-            dataset.selectText = selectText;
+            if (selectText) {
+                dataset.selectText = selectText;
+            }
             assignCustomProperties(div, choice, false);
             if (choice.disabled) {
                 (_e = div.classList).add.apply(_e, getClassNames(itemDisabled));

public/assets/scripts/choices.mjs

@@ -3175,7 +3175,9 @@ var templates = {
         dataset.choice = '';
         dataset.id = choice.id;
         dataset.value = rawValue;
-        dataset.selectText = selectText;
+        if (selectText) {
+            dataset.selectText = selectText;
+        }
         assignCustomProperties(div, choice, false);
         if (choice.disabled) {
             (_e = div.classList).add.apply(_e, getClassNames(itemDisabled));

public/assets/scripts/choices.search-basic.js

@@ -2699,7 +2699,9 @@
             dataset.choice = '';
             dataset.id = choice.id;
             dataset.value = rawValue;
-            dataset.selectText = selectText;
+            if (selectText) {
+                dataset.selectText = selectText;
+            }
             assignCustomProperties(div, choice, false);
             if (choice.disabled) {
                 (_e = div.classList).add.apply(_e, getClassNames(itemDisabled));

public/assets/scripts/choices.search-basic.mjs

@@ -2693,7 +2693,9 @@ var templates = {
         dataset.choice = '';
         dataset.id = choice.id;
         dataset.value = rawValue;
-        dataset.selectText = selectText;
+        if (selectText) {
+            dataset.selectText = selectText;
+        }
         assignCustomProperties(div, choice, false);
         if (choice.disabled) {
             (_e = div.classList).add.apply(_e, getClassNames(itemDisabled));

public/assets/scripts/choices.search-prefix.js

@@ -1550,7 +1550,9 @@
             dataset.choice = '';
             dataset.id = choice.id;
             dataset.value = rawValue;
-            dataset.selectText = selectText;
+            if (selectText) {
+                dataset.selectText = selectText;
+            }
             assignCustomProperties(div, choice, false);
             if (choice.disabled) {
                 (_e = div.classList).add.apply(_e, getClassNames(itemDisabled));

public/assets/scripts/choices.search-prefix.mjs

@@ -1544,7 +1544,9 @@ var templates = {
         dataset.choice = '';
         dataset.id = choice.id;
         dataset.value = rawValue;
-        dataset.selectText = selectText;
+        if (selectText) {
+            dataset.selectText = selectText;
+        }
         assignCustomProperties(div, choice, false);
         if (choice.disabled) {
             (_e = div.classList).add.apply(_e, getClassNames(itemDisabled));

public/assets/styles/choices.css

@@ -240,10 +240,10 @@
   text-align: right;
 }
 @media (min-width: 640px) {
-  .choices__list--dropdown .choices__item--selectable, .choices__list[aria-expanded] .choices__item--selectable {
+  .choices__list--dropdown .choices__item--selectable[data-select-text], .choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
     padding-right: 100px;
   }
-  .choices__list--dropdown .choices__item--selectable::after, .choices__list[aria-expanded] .choices__item--selectable::after {
+  .choices__list--dropdown .choices__item--selectable[data-select-text]::after, .choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after {
     content: attr(data-select-text);
     font-size: 12px;
     opacity: 0;
@@ -252,12 +252,12 @@
     top: 50%;
     transform: translateY(-50%);
   }
-  [dir=rtl] .choices__list--dropdown .choices__item--selectable, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable {
+  [dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text], [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
     text-align: right;
     padding-left: 100px;
     padding-right: 10px;
   }
-  [dir=rtl] .choices__list--dropdown .choices__item--selectable::after, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable::after {
+  [dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text]::after, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after {
     right: auto;
     left: 10px;
   }