fix(VOverflowBtn): make persistentPlaceholder label visible (#15055)

Fixes #15052
vuetifyjs · May 13, 2022 · 002afbe · 002afbe
1 parent 2eab4f2
commit 002afbe
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 1 deletion.
diff --git a/packages/api-generator/src/locale/en/v-overflow-btn.json b/packages/api-generator/src/locale/en/v-overflow-btn.json
@@ -2,6 +2,7 @@
   "props": {
     "editable": "Creates an editable button",
     "overflow": "Creates an overflow button",
-    "segmented": "Creates a segmented button"
+    "segmented": "Creates a segmented button",
+    "persistentPlaceholder": "Forces label to always be visible"
   }
 }
diff --git a/packages/vuetify/src/components/VOverflowBtn/VOverflowBtn.ts b/packages/vuetify/src/components/VOverflowBtn/VOverflowBtn.ts
@@ -40,6 +40,9 @@ export default VAutocomplete.extend({
     computedItems (): object[] {
       return this.segmented ? this.allItems : this.filteredItems
     },
+    labelValue (): boolean {
+      return (this.isFocused && !this.persistentPlaceholder) || this.isLabelActive
+    },
   },
 
   methods: {

diff --git a/packages/vuetify/src/components/VOverflowBtn/__tests__/VOverflowBtn.spec.ts b/packages/vuetify/src/components/VOverflowBtn/__tests__/VOverflowBtn.spec.ts
@@ -108,4 +108,22 @@ describe('VOverflowBtn.js', () => {
 
     expect(callback).toHaveBeenCalled()
   })
+
+  it('should show label with persistentPlaceholder property set to true', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        items: ['foo'],
+        label: 'Some label',
+        persistentPlaceholder: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    wrapper.find('input').trigger('click')
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 })
diff --git a/...ges/vuetify/src/components/VOverflowBtn/__tests__/__snapshots__/VOverflowBtn.spec.ts.snap b/...ges/vuetify/src/components/VOverflowBtn/__tests__/__snapshots__/VOverflowBtn.spec.ts.snap
@@ -1,5 +1,101 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`VOverflowBtn.js should show label with persistentPlaceholder property set to true 1`] = `
+<div class="v-input theme--light v-text-field v-text-field--single-line v-select v-autocomplete v-overflow-btn">
+  <div class="v-input__control">
+    <div role="combobox"
+         aria-haspopup="listbox"
+         aria-expanded="false"
+         aria-owns="list-14"
+         class="v-input__slot"
+    >
+      <div class="v-select__slot">
+        <label for="input-14"
+               class="v-label theme--light"
+        >
+          Some label
+        </label>
+        <div class="v-select__selections">
+          <input id="input-14"
+                 readonly="readonly"
+                 type="text"
+          >
+        </div>
+        <div class="v-input__append-inner">
+          <div class="v-input__icon v-input__icon--append">
+            <i aria-hidden="true"
+               class="v-icon notranslate material-icons theme--light"
+            >
+              $dropdown
+            </i>
+          </div>
+        </div>
+        <input type="hidden">
+      </div>
+      <div class="v-menu">
+      </div>
+    </div>
+    <div class="v-text-field__details">
+      <div class="v-messages theme--light">
+        <span name="message-transition"
+              tag="div"
+              class="v-messages__wrapper"
+        >
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VOverflowBtn.js should show label with persistentPlaceholder property set to true 2`] = `
+<div class="v-input theme--light v-text-field v-text-field--single-line v-select v-select--is-menu-active v-autocomplete v-overflow-btn">
+  <div class="v-input__control">
+    <div role="combobox"
+         aria-haspopup="listbox"
+         aria-expanded="true"
+         aria-owns="list-14"
+         class="v-input__slot"
+    >
+      <div class="v-select__slot">
+        <label for="input-14"
+               class="v-label theme--light"
+        >
+          Some label
+        </label>
+        <div class="v-select__selections">
+          <input id="input-14"
+                 readonly="readonly"
+                 type="text"
+          >
+        </div>
+        <div class="v-input__append-inner">
+          <div class="v-input__icon v-input__icon--append">
+            <i aria-hidden="true"
+               class="v-icon notranslate material-icons theme--light"
+            >
+              $dropdown
+            </i>
+          </div>
+        </div>
+        <input type="hidden">
+      </div>
+      <div class="v-menu">
+      </div>
+    </div>
+    <div class="v-text-field__details">
+      <div class="v-messages theme--light">
+        <span name="message-transition"
+              tag="div"
+              class="v-messages__wrapper"
+        >
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`VOverflowBtn.js should use default autocomplete selections 1`] = `
 <div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--single-line v-select v-select--is-multi v-autocomplete v-overflow-btn">
   <div class="v-input__control">