From 278e7e8d0eeba79d21bf4d02998155ef5cea186a Mon Sep 17 00:00:00 2001
From: David Featherston <david.featherstone@dpc.vic.gov.au>
Date: Fri, 28 Jun 2024 08:51:21 +1000
Subject: [PATCH] fix(@dpc-sdp/ripple-ui-core): improve accuracy of more count
 for dropdowns

---
 .../step_definitions/content-types/listing.ts |  4 +-
 .../RplFormDropdown/MultiValueLabel.css       |  6 +++
 .../RplFormDropdown/MultiValueLabel.vue       | 37 ++++++++++++++-----
 3 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/packages/ripple-test-utils/step_definitions/content-types/listing.ts b/packages/ripple-test-utils/step_definitions/content-types/listing.ts
index 05a6e4a246..a1fe0d8aa4 100644
--- a/packages/ripple-test-utils/step_definitions/content-types/listing.ts
+++ b/packages/ripple-test-utils/step_definitions/content-types/listing.ts
@@ -221,7 +221,9 @@ Then(
       .invoke('attr', 'for')
       .then((dropdownId) => {
         cy.get(`#${dropdownId}`).as('selectedDropdown')
-        cy.get('@selectedDropdown').should('have.text', value)
+        cy.get('@selectedDropdown').should(($div) => {
+          expect($div.get(0).innerText).to.eq(value)
+        })
       })
   }
 )
diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/MultiValueLabel.css b/packages/ripple-ui-forms/src/components/RplFormDropdown/MultiValueLabel.css
index 5b1876e134..810713998b 100644
--- a/packages/ripple-ui-forms/src/components/RplFormDropdown/MultiValueLabel.css
+++ b/packages/ripple-ui-forms/src/components/RplFormDropdown/MultiValueLabel.css
@@ -14,6 +14,12 @@
   width: 100%;
 }
 
+.rpl-form-dropdown__multi-value-label-char {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .rpl-form-dropdown__more-label {
   display: block;
   font-weight: bold;
diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/MultiValueLabel.vue b/packages/ripple-ui-forms/src/components/RplFormDropdown/MultiValueLabel.vue
index 2fd68ea4a4..4a046b351e 100644
--- a/packages/ripple-ui-forms/src/components/RplFormDropdown/MultiValueLabel.vue
+++ b/packages/ripple-ui-forms/src/components/RplFormDropdown/MultiValueLabel.vue
@@ -42,7 +42,7 @@ const calculateNumberOfHiddenItems = async () => {
   const containerBBox = itemsRef.value.getBoundingClientRect()
 
   // Here we figure out how much space there is to fit the items in, it's
-  // important to factor in the the width of the '+# more' label here even
+  // important to factor in the width of the '+# more' label here even
   // if it's not currently being rendered.
   const widthToFill =
     numItemsHidden.value === 0
@@ -55,7 +55,12 @@ const calculateNumberOfHiddenItems = async () => {
   for (const labelEl of labelElements) {
     const itemBBox = labelEl.getBoundingClientRect()
 
-    if (itemBBox.left - containerBBox.left > widthToFill) {
+    const itemCharWidth =
+      labelEl
+        .querySelector('.rpl-form-dropdown__multi-value-label-char')
+        ?.getBoundingClientRect()?.width || 0
+
+    if (itemBBox.left - containerBBox.left > widthToFill - itemCharWidth) {
       break
     } else {
       countShown += 1
@@ -90,18 +95,30 @@ useResizeObserver(itemsRef, (entries) => {
 <template>
   <div class="rpl-form-dropdown__multi-value-label-wrap">
     <div ref="itemsRef" class="rpl-form-dropdown__multi-value-label rpl-type-p">
-      <span v-for="(option, i) in selectedOptions" :key="option.id" data-option-label="true">{{
-        option.label
-      }}{{ i === selectedOptions.length - 1 ? '' : ', ' }}</span>
+      <span
+        v-for="(option, i) in selectedOptions"
+        :key="option.id"
+        data-option-label="true"
+        >{{ option.label
+        }}<span
+          class="rpl-form-dropdown__multi-value-label-char"
+          aria-hidden="true"
+          >&hellip;{{ option.label?.charAt(0) }}</span
+        >{{ i === selectedOptions.length - 1 ? '' : ', ' }}</span
+      >
     </div>
-    <div v-if="numItemsHidden > 0" :style="{
-      width: `${MORE_LABEL_WIDTH}px`
-    }" class="rpl-form-dropdown__more-label rpl-type-p">
+    <div
+      v-if="numItemsHidden > 0"
+      :style="{
+        width: `${MORE_LABEL_WIDTH}px`
+      }"
+      class="rpl-form-dropdown__more-label rpl-type-p"
+    >
       +{{ numItemsHidden }} more
     </div>
   </div>
 </template>
 
-<style src="./MultiValueLabel.css">
+<style src="./MultiValueLabel.css"></style>
 
-</style>
+<style></style>