From 7a8493242c0d08ed251426b376b89779da728e33 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Tue, 2 May 2023 17:30:10 +0200
Subject: [PATCH 1/9] add `get-text-value` helper

---
 jest/create-jest-config.cjs                   |  6 +-
 jest/polyfills.ts                             | 15 ++++
 .../src/utils/get-text-value.test.ts          | 69 +++++++++++++++++++
 .../src/utils/get-text-value.ts               | 68 ++++++++++++++++++
 .../src/utils/get-text-value.test.ts          | 69 +++++++++++++++++++
 .../src/utils/get-text-value.ts               | 68 ++++++++++++++++++
 6 files changed, 294 insertions(+), 1 deletion(-)
 create mode 100644 jest/polyfills.ts
 create mode 100644 packages/@headlessui-react/src/utils/get-text-value.test.ts
 create mode 100644 packages/@headlessui-react/src/utils/get-text-value.ts
 create mode 100644 packages/@headlessui-vue/src/utils/get-text-value.test.ts
 create mode 100644 packages/@headlessui-vue/src/utils/get-text-value.ts

diff --git a/jest/create-jest-config.cjs b/jest/create-jest-config.cjs
index 3ab2429e19..63e9394dbe 100644
--- a/jest/create-jest-config.cjs
+++ b/jest/create-jest-config.cjs
@@ -3,7 +3,11 @@ module.exports = function createJestConfig(root, options) {
   return Object.assign(
     {
       rootDir: root,
-      setupFilesAfterEnv: ['<rootDir>../../jest/custom-matchers.ts', ...setupFilesAfterEnv],
+      setupFilesAfterEnv: [
+        '<rootDir>../../jest/custom-matchers.ts',
+        '<rootDir>../../jest/polyfills.ts',
+        ...setupFilesAfterEnv,
+      ],
       transform: {
         '^.+\\.(t|j)sx?$': '@swc/jest',
         ...transform,
diff --git a/jest/polyfills.ts b/jest/polyfills.ts
new file mode 100644
index 0000000000..f928491855
--- /dev/null
+++ b/jest/polyfills.ts
@@ -0,0 +1,15 @@
+// JSDOM Doesn't implement innerText yet: https://github.com/jsdom/jsdom/issues/1245
+// So this is a hacky way of implementing it using `textContent`.
+// Real implementation doesn't use textContent because:
+// > textContent gets the content of all elements, including <script> and <style> elements. In
+// > contrast, innerText only shows "human-readable" elements.
+// >
+// > — https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext
+Object.defineProperty(HTMLElement.prototype, 'innerText', {
+  get() {
+    return this.textContent
+  },
+  set(value) {
+    this.textContent = value
+  },
+})
diff --git a/packages/@headlessui-react/src/utils/get-text-value.test.ts b/packages/@headlessui-react/src/utils/get-text-value.test.ts
new file mode 100644
index 0000000000..b96cf13495
--- /dev/null
+++ b/packages/@headlessui-react/src/utils/get-text-value.test.ts
@@ -0,0 +1,69 @@
+import { getTextValue } from './get-text-value'
+
+let html = String.raw
+
+it('should be possible to get the text value from an element', () => {
+  let element = document.createElement('div')
+  element.innerText = 'Hello World'
+  expect(getTextValue(element)).toEqual('Hello World')
+})
+
+it('should strip out emojis when receiving the text from the element', () => {
+  let element = document.createElement('div')
+  element.innerText = '🇨🇦 Canada'
+  expect(getTextValue(element)).toEqual('Canada')
+})
+
+it('should strip out hidden elements', () => {
+  let element = document.createElement('div')
+  element.innerHTML = html`<div><span hidden>Hello</span> world</div>`
+  expect(getTextValue(element)).toEqual('world')
+})
+
+it('should strip out aria-hidden elements', () => {
+  let element = document.createElement('div')
+  element.innerHTML = html`<div><span aria-hidden>Hello</span> world</div>`
+  expect(getTextValue(element)).toEqual('world')
+})
+
+it('should strip out role="img" elements', () => {
+  let element = document.createElement('div')
+  element.innerHTML = html`<div><span role="img">°</span> world</div>`
+  expect(getTextValue(element)).toEqual('world')
+})
+
+it('should be possible to get the text value from the aria-label', () => {
+  let element = document.createElement('div')
+  element.setAttribute('aria-label', 'Hello World')
+  expect(getTextValue(element)).toEqual('Hello World')
+})
+
+it('should be possible to get the text value from the aria-label (even if there is content)', () => {
+  let element = document.createElement('div')
+  element.setAttribute('aria-label', 'Hello World')
+  element.innerHTML = 'Hello Universe'
+  element.innerText = 'Hello Universe'
+  expect(getTextValue(element)).toEqual('Hello World')
+})
+
+it('should be possible to get the text value from the element referenced by aria-labelledby (using `aria-label`)', () => {
+  document.body.innerHTML = html`
+    <div>
+      <div id="foo" aria-labelledby="bar">Contents of foo</div>
+      <div id="bar" aria-label="Actual value of bar">Contents of bar</div>
+    </div>
+  `
+
+  expect(getTextValue(document.querySelector('#foo')!)).toEqual('Actual value of bar')
+})
+
+it('should be possible to get the text value from the element referenced by aria-labelledby (using its contents)', () => {
+  document.body.innerHTML = html`
+    <div>
+      <div id="foo" aria-labelledby="bar">Contents of foo</div>
+      <div id="bar">Contents of bar</div>
+    </div>
+  `
+
+  expect(getTextValue(document.querySelector('#foo')!)).toEqual('Contents of bar')
+})
diff --git a/packages/@headlessui-react/src/utils/get-text-value.ts b/packages/@headlessui-react/src/utils/get-text-value.ts
new file mode 100644
index 0000000000..3021dbc39f
--- /dev/null
+++ b/packages/@headlessui-react/src/utils/get-text-value.ts
@@ -0,0 +1,68 @@
+function getTextContents(element: HTMLElement): string {
+  // Using innerText instad of textContent because:
+  //
+  // > textContent gets the content of all elements, including <script> and <style> elements. In
+  // > contrast, innerText only shows "human-readable" elements.
+  // >
+  // > — https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext
+  let value = element.innerText ?? ''
+
+  // Check if it contains some emojis or not, if so, we need to remove them
+  // because ideally we work with simple text values.
+
+  // Ideally we can use the much simpler RegEx: /\p{Extended_Pictographic}/u
+  // but we can't rely on this yet, so we use the more complex one.
+  if (
+    /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/.test(
+      value
+    )
+  ) {
+    value = value.replace(
+      /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
+      ''
+    )
+  }
+
+  // Remove all the elements that shouldn't be there.
+  //
+  // [hidden]       — The user doesn't see it
+  // [aria-hidden]  — The screen reader doesn't see it
+  // [role="img"]   — Even if it is text, it is used as an image
+  //
+  // This is probably the slowest part, but if you want complete control over the text value,
+  // you better set an `aria-label` instead.
+  let children = element.querySelectorAll('[hidden],[aria-hidden],[role="img"]')
+  if (children.length > 0) {
+    for (let el of children) {
+      if (el instanceof HTMLElement) {
+        value = value.replace(el.innerText ?? '', '')
+      }
+    }
+  }
+
+  return value
+}
+
+export function getTextValue(element: HTMLElement): string {
+  // Try to use the `aria-label` first
+  let label = element.getAttribute('aria-label')
+  if (typeof label === 'string') return label.trim()
+
+  // Try to use the `aria-labelledby` second
+  let labelledby = element.getAttribute('aria-labelledby')
+  if (labelledby) {
+    let labelEl = document.getElementById(labelledby)
+    if (labelEl) {
+      let label = labelEl.getAttribute('aria-label')
+      // Try to use the `aria-label` first (of the referenced element)
+      if (typeof label === 'string') return label.trim()
+
+      // This time, the `aria-labelledby` isn't used anymore (in Safari), so we just have to
+      // look at the contents itself.
+      return getTextContents(labelEl).trim()
+    }
+  }
+
+  // Try to use the text contents of the element itself
+  return getTextContents(element).trim()
+}
diff --git a/packages/@headlessui-vue/src/utils/get-text-value.test.ts b/packages/@headlessui-vue/src/utils/get-text-value.test.ts
new file mode 100644
index 0000000000..b96cf13495
--- /dev/null
+++ b/packages/@headlessui-vue/src/utils/get-text-value.test.ts
@@ -0,0 +1,69 @@
+import { getTextValue } from './get-text-value'
+
+let html = String.raw
+
+it('should be possible to get the text value from an element', () => {
+  let element = document.createElement('div')
+  element.innerText = 'Hello World'
+  expect(getTextValue(element)).toEqual('Hello World')
+})
+
+it('should strip out emojis when receiving the text from the element', () => {
+  let element = document.createElement('div')
+  element.innerText = '🇨🇦 Canada'
+  expect(getTextValue(element)).toEqual('Canada')
+})
+
+it('should strip out hidden elements', () => {
+  let element = document.createElement('div')
+  element.innerHTML = html`<div><span hidden>Hello</span> world</div>`
+  expect(getTextValue(element)).toEqual('world')
+})
+
+it('should strip out aria-hidden elements', () => {
+  let element = document.createElement('div')
+  element.innerHTML = html`<div><span aria-hidden>Hello</span> world</div>`
+  expect(getTextValue(element)).toEqual('world')
+})
+
+it('should strip out role="img" elements', () => {
+  let element = document.createElement('div')
+  element.innerHTML = html`<div><span role="img">°</span> world</div>`
+  expect(getTextValue(element)).toEqual('world')
+})
+
+it('should be possible to get the text value from the aria-label', () => {
+  let element = document.createElement('div')
+  element.setAttribute('aria-label', 'Hello World')
+  expect(getTextValue(element)).toEqual('Hello World')
+})
+
+it('should be possible to get the text value from the aria-label (even if there is content)', () => {
+  let element = document.createElement('div')
+  element.setAttribute('aria-label', 'Hello World')
+  element.innerHTML = 'Hello Universe'
+  element.innerText = 'Hello Universe'
+  expect(getTextValue(element)).toEqual('Hello World')
+})
+
+it('should be possible to get the text value from the element referenced by aria-labelledby (using `aria-label`)', () => {
+  document.body.innerHTML = html`
+    <div>
+      <div id="foo" aria-labelledby="bar">Contents of foo</div>
+      <div id="bar" aria-label="Actual value of bar">Contents of bar</div>
+    </div>
+  `
+
+  expect(getTextValue(document.querySelector('#foo')!)).toEqual('Actual value of bar')
+})
+
+it('should be possible to get the text value from the element referenced by aria-labelledby (using its contents)', () => {
+  document.body.innerHTML = html`
+    <div>
+      <div id="foo" aria-labelledby="bar">Contents of foo</div>
+      <div id="bar">Contents of bar</div>
+    </div>
+  `
+
+  expect(getTextValue(document.querySelector('#foo')!)).toEqual('Contents of bar')
+})
diff --git a/packages/@headlessui-vue/src/utils/get-text-value.ts b/packages/@headlessui-vue/src/utils/get-text-value.ts
new file mode 100644
index 0000000000..3021dbc39f
--- /dev/null
+++ b/packages/@headlessui-vue/src/utils/get-text-value.ts
@@ -0,0 +1,68 @@
+function getTextContents(element: HTMLElement): string {
+  // Using innerText instad of textContent because:
+  //
+  // > textContent gets the content of all elements, including <script> and <style> elements. In
+  // > contrast, innerText only shows "human-readable" elements.
+  // >
+  // > — https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext
+  let value = element.innerText ?? ''
+
+  // Check if it contains some emojis or not, if so, we need to remove them
+  // because ideally we work with simple text values.
+
+  // Ideally we can use the much simpler RegEx: /\p{Extended_Pictographic}/u
+  // but we can't rely on this yet, so we use the more complex one.
+  if (
+    /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/.test(
+      value
+    )
+  ) {
+    value = value.replace(
+      /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
+      ''
+    )
+  }
+
+  // Remove all the elements that shouldn't be there.
+  //
+  // [hidden]       — The user doesn't see it
+  // [aria-hidden]  — The screen reader doesn't see it
+  // [role="img"]   — Even if it is text, it is used as an image
+  //
+  // This is probably the slowest part, but if you want complete control over the text value,
+  // you better set an `aria-label` instead.
+  let children = element.querySelectorAll('[hidden],[aria-hidden],[role="img"]')
+  if (children.length > 0) {
+    for (let el of children) {
+      if (el instanceof HTMLElement) {
+        value = value.replace(el.innerText ?? '', '')
+      }
+    }
+  }
+
+  return value
+}
+
+export function getTextValue(element: HTMLElement): string {
+  // Try to use the `aria-label` first
+  let label = element.getAttribute('aria-label')
+  if (typeof label === 'string') return label.trim()
+
+  // Try to use the `aria-labelledby` second
+  let labelledby = element.getAttribute('aria-labelledby')
+  if (labelledby) {
+    let labelEl = document.getElementById(labelledby)
+    if (labelEl) {
+      let label = labelEl.getAttribute('aria-label')
+      // Try to use the `aria-label` first (of the referenced element)
+      if (typeof label === 'string') return label.trim()
+
+      // This time, the `aria-labelledby` isn't used anymore (in Safari), so we just have to
+      // look at the contents itself.
+      return getTextContents(labelEl).trim()
+    }
+  }
+
+  // Try to use the text contents of the element itself
+  return getTextContents(element).trim()
+}

From 21a293d1f81138f8b78e9c09329da5989ec50a8d Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Tue, 2 May 2023 18:48:34 +0200
Subject: [PATCH 2/9] use `getTextValue` in `Listbox` component

---
 .../src/components/listbox/listbox.tsx              |  7 ++++++-
 .../src/components/listbox/listbox.ts               | 13 ++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
index ad60c66b5e..f649aaeb42 100644
--- a/packages/@headlessui-react/src/components/listbox/listbox.tsx
+++ b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -48,6 +48,7 @@ import { useEvent } from '../../hooks/use-event'
 import { useControllable } from '../../hooks/use-controllable'
 import { useLatestValue } from '../../hooks/use-latest-value'
 import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
+import { getTextValue } from '../../utils/get-text-value'
 
 enum ListboxStates {
   Open,
@@ -939,7 +940,11 @@ function OptionFn<
     value,
     domRef: internalOptionRef,
     get textValue() {
-      return internalOptionRef.current?.textContent?.toLowerCase()
+      let element = internalOptionRef.current
+      if (element) {
+        return getTextValue(element).trim().toLowerCase()
+      }
+      return ''
     },
   })
   let optionRef = useSyncRefs(ref, internalOptionRef)
diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.ts b/packages/@headlessui-vue/src/components/listbox/listbox.ts
index 30c86f6b33..8f3e468b08 100644
--- a/packages/@headlessui-vue/src/components/listbox/listbox.ts
+++ b/packages/@headlessui-vue/src/components/listbox/listbox.ts
@@ -35,6 +35,7 @@ import { Hidden, Features as HiddenFeatures } from '../../internal/hidden'
 import { objectToFormEntries } from '../../utils/form'
 import { useControllable } from '../../hooks/use-controllable'
 import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
+import { getTextValue } from '../../utils/get-text-value'
 
 function defaultComparator<T>(a: T, z: T): boolean {
   return a === z
@@ -734,13 +735,15 @@ export let ListboxOption = defineComponent({
     let dataRef = computed<ListboxOptionData>(() => ({
       disabled: props.disabled,
       value: props.value,
-      textValue: '',
+      get textValue() {
+        let element = dom(internalOptionRef)
+        if (element) {
+          return getTextValue(element).trim().toLowerCase()
+        }
+        return ''
+      },
       domRef: internalOptionRef,
     }))
-    onMounted(() => {
-      let textValue = dom(internalOptionRef)?.textContent?.toLowerCase().trim()
-      if (textValue !== undefined) dataRef.value.textValue = textValue
-    })
 
     onMounted(() => api.registerOption(props.id, dataRef))
     onUnmounted(() => api.unregisterOption(props.id))

From 98a81e1e40813d39b9c930a414af13c4a3ec0edc Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Tue, 2 May 2023 18:48:45 +0200
Subject: [PATCH 3/9] use `getTextValue` in `Menu` component

---
 .../src/components/menu/menu.tsx                 | 16 ++++++++++++----
 .../@headlessui-vue/src/components/menu/menu.ts  | 13 ++++++++-----
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx
index 0ed50af190..96971faacc 100644
--- a/packages/@headlessui-react/src/components/menu/menu.tsx
+++ b/packages/@headlessui-react/src/components/menu/menu.tsx
@@ -51,6 +51,7 @@ import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 import { useOwnerDocument } from '../../hooks/use-owner'
 import { useEvent } from '../../hooks/use-event'
 import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
+import { getTextValue } from '../../utils/get-text-value'
 
 enum MenuStates {
   Open,
@@ -636,14 +637,21 @@ function ItemFn<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(
     /* We also want to trigger this when the position of the active item changes so that we can re-trigger the scrollIntoView */ state.activeItemIndex,
   ])
 
-  let bag = useRef<MenuItemDataRef['current']>({ disabled, domRef: internalItemRef })
+  let bag = useRef<MenuItemDataRef['current']>({
+    disabled,
+    domRef: internalItemRef,
+    get textValue() {
+      let element = internalItemRef.current
+      if (element) {
+        return getTextValue(element).trim().toLowerCase()
+      }
+      return ''
+    },
+  })
 
   useIsoMorphicEffect(() => {
     bag.current.disabled = disabled
   }, [bag, disabled])
-  useIsoMorphicEffect(() => {
-    bag.current.textValue = internalItemRef.current?.textContent?.toLowerCase()
-  }, [bag, internalItemRef])
 
   useIsoMorphicEffect(() => {
     dispatch({ type: ActionTypes.RegisterItem, id, dataRef: bag })
diff --git a/packages/@headlessui-vue/src/components/menu/menu.ts b/packages/@headlessui-vue/src/components/menu/menu.ts
index 7a644ce4e0..c61c6e629a 100644
--- a/packages/@headlessui-vue/src/components/menu/menu.ts
+++ b/packages/@headlessui-vue/src/components/menu/menu.ts
@@ -32,6 +32,7 @@ import {
 } from '../../utils/focus-management'
 import { useOutsideClick } from '../../hooks/use-outside-click'
 import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
+import { getTextValue } from '../../utils/get-text-value'
 
 enum MenuStates {
   Open,
@@ -513,13 +514,15 @@ export let MenuItem = defineComponent({
 
     let dataRef = computed<MenuItemData>(() => ({
       disabled: props.disabled,
-      textValue: '',
+      get textValue() {
+        let element = dom(internalItemRef)
+        if (element) {
+          return getTextValue(element).trim().toLowerCase()
+        }
+        return ''
+      },
       domRef: internalItemRef,
     }))
-    onMounted(() => {
-      let textValue = dom(internalItemRef)?.textContent?.toLowerCase().trim()
-      if (textValue !== undefined) dataRef.value.textValue = textValue
-    })
 
     onMounted(() => api.registerItem(props.id, dataRef))
     onUnmounted(() => api.unregisterItem(props.id))

From ccd5914419335c834092b334c1fa5d3dcb6e01f6 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Tue, 2 May 2023 19:22:22 +0200
Subject: [PATCH 4/9] update changelog

---
 packages/@headlessui-react/CHANGELOG.md | 1 +
 packages/@headlessui-vue/CHANGELOG.md   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index c43fe32125..e0e3ba571e 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Ensure `FocusTrap` is only active when the given `enabled` value is `true` ([#2456](https://github.com/tailwindlabs/headlessui/pull/2456))
 - Stop `<Transition appear>` from overwriting classes on re-render ([#2457](https://github.com/tailwindlabs/headlessui/pull/2457))
+- Improve control over `Menu` and `Listbox` options while searching ([#2471](https://github.com/tailwindlabs/headlessui/pull/2471))
 
 ## [1.7.14] - 2023-04-12
 
diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
index acd57d3d33..da424a7154 100644
--- a/packages/@headlessui-vue/CHANGELOG.md
+++ b/packages/@headlessui-vue/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix memory leak in `Popover` component ([#2430](https://github.com/tailwindlabs/headlessui/pull/2430))
 - Ensure `FocusTrap` is only active when the given `enabled` value is `true` ([#2456](https://github.com/tailwindlabs/headlessui/pull/2456))
 - Ensure the exposed `activeIndex` is up to date for the `Combobox` component ([#2463](https://github.com/tailwindlabs/headlessui/pull/2463))
+- Improve control over `Menu` and `Listbox` options while searching ([#2471](https://github.com/tailwindlabs/headlessui/pull/2471))
 
 ## [1.7.13] - 2023-04-12
 

From d681caa2b4077443fa5bf928b44bc134c180ce38 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 3 May 2023 12:34:05 +0200
Subject: [PATCH 5/9] ensure we handle multiple values for `aria-labelledby`

---
 .../src/utils/get-text-value.test.ts          | 26 +++++++++++++++++
 .../src/utils/get-text-value.ts               | 29 +++++++++++++------
 .../src/utils/get-text-value.test.ts          | 26 +++++++++++++++++
 .../src/utils/get-text-value.ts               | 29 +++++++++++++------
 4 files changed, 92 insertions(+), 18 deletions(-)

diff --git a/packages/@headlessui-react/src/utils/get-text-value.test.ts b/packages/@headlessui-react/src/utils/get-text-value.test.ts
index b96cf13495..7d1269d323 100644
--- a/packages/@headlessui-react/src/utils/get-text-value.test.ts
+++ b/packages/@headlessui-react/src/utils/get-text-value.test.ts
@@ -67,3 +67,29 @@ it('should be possible to get the text value from the element referenced by aria
 
   expect(getTextValue(document.querySelector('#foo')!)).toEqual('Contents of bar')
 })
+
+it('should be possible to get the text value from the element referenced by aria-labelledby (using `aria-label`, multiple)', () => {
+  document.body.innerHTML = html`
+    <div>
+      <div id="foo" aria-labelledby="bar baz">Contents of foo</div>
+      <div id="bar" aria-label="Actual value of bar">Contents of bar</div>
+      <div id="baz" aria-label="Actual value of baz">Contents of baz</div>
+    </div>
+  `
+
+  expect(getTextValue(document.querySelector('#foo')!)).toEqual(
+    'Actual value of bar, Actual value of baz'
+  )
+})
+
+it('should be possible to get the text value from the element referenced by aria-labelledby (using its contents, multiple)', () => {
+  document.body.innerHTML = html`
+    <div>
+      <div id="foo" aria-labelledby="bar baz">Contents of foo</div>
+      <div id="bar">Contents of bar</div>
+      <div id="baz">Contents of baz</div>
+    </div>
+  `
+
+  expect(getTextValue(document.querySelector('#foo')!)).toEqual('Contents of bar, Contents of baz')
+})
diff --git a/packages/@headlessui-react/src/utils/get-text-value.ts b/packages/@headlessui-react/src/utils/get-text-value.ts
index 3021dbc39f..256bc0ce8d 100644
--- a/packages/@headlessui-react/src/utils/get-text-value.ts
+++ b/packages/@headlessui-react/src/utils/get-text-value.ts
@@ -51,16 +51,27 @@ export function getTextValue(element: HTMLElement): string {
   // Try to use the `aria-labelledby` second
   let labelledby = element.getAttribute('aria-labelledby')
   if (labelledby) {
-    let labelEl = document.getElementById(labelledby)
-    if (labelEl) {
-      let label = labelEl.getAttribute('aria-label')
-      // Try to use the `aria-label` first (of the referenced element)
-      if (typeof label === 'string') return label.trim()
+    // aria-labelledby can be a space-separated list of IDs, so we need to split them up and
+    // combine them into a single string.
+    let labels = labelledby
+      .split(' ')
+      .map((labelledby) => {
+        let labelEl = document.getElementById(labelledby)
+        if (labelEl) {
+          let label = labelEl.getAttribute('aria-label')
+          // Try to use the `aria-label` first (of the referenced element)
+          if (typeof label === 'string') return label.trim()
 
-      // This time, the `aria-labelledby` isn't used anymore (in Safari), so we just have to
-      // look at the contents itself.
-      return getTextContents(labelEl).trim()
-    }
+          // This time, the `aria-labelledby` isn't used anymore (in Safari), so we just have to
+          // look at the contents itself.
+          return getTextContents(labelEl).trim()
+        }
+
+        return null
+      })
+      .filter(Boolean)
+
+    if (labels.length > 0) return labels.join(', ')
   }
 
   // Try to use the text contents of the element itself
diff --git a/packages/@headlessui-vue/src/utils/get-text-value.test.ts b/packages/@headlessui-vue/src/utils/get-text-value.test.ts
index b96cf13495..7d1269d323 100644
--- a/packages/@headlessui-vue/src/utils/get-text-value.test.ts
+++ b/packages/@headlessui-vue/src/utils/get-text-value.test.ts
@@ -67,3 +67,29 @@ it('should be possible to get the text value from the element referenced by aria
 
   expect(getTextValue(document.querySelector('#foo')!)).toEqual('Contents of bar')
 })
+
+it('should be possible to get the text value from the element referenced by aria-labelledby (using `aria-label`, multiple)', () => {
+  document.body.innerHTML = html`
+    <div>
+      <div id="foo" aria-labelledby="bar baz">Contents of foo</div>
+      <div id="bar" aria-label="Actual value of bar">Contents of bar</div>
+      <div id="baz" aria-label="Actual value of baz">Contents of baz</div>
+    </div>
+  `
+
+  expect(getTextValue(document.querySelector('#foo')!)).toEqual(
+    'Actual value of bar, Actual value of baz'
+  )
+})
+
+it('should be possible to get the text value from the element referenced by aria-labelledby (using its contents, multiple)', () => {
+  document.body.innerHTML = html`
+    <div>
+      <div id="foo" aria-labelledby="bar baz">Contents of foo</div>
+      <div id="bar">Contents of bar</div>
+      <div id="baz">Contents of baz</div>
+    </div>
+  `
+
+  expect(getTextValue(document.querySelector('#foo')!)).toEqual('Contents of bar, Contents of baz')
+})
diff --git a/packages/@headlessui-vue/src/utils/get-text-value.ts b/packages/@headlessui-vue/src/utils/get-text-value.ts
index 3021dbc39f..256bc0ce8d 100644
--- a/packages/@headlessui-vue/src/utils/get-text-value.ts
+++ b/packages/@headlessui-vue/src/utils/get-text-value.ts
@@ -51,16 +51,27 @@ export function getTextValue(element: HTMLElement): string {
   // Try to use the `aria-labelledby` second
   let labelledby = element.getAttribute('aria-labelledby')
   if (labelledby) {
-    let labelEl = document.getElementById(labelledby)
-    if (labelEl) {
-      let label = labelEl.getAttribute('aria-label')
-      // Try to use the `aria-label` first (of the referenced element)
-      if (typeof label === 'string') return label.trim()
+    // aria-labelledby can be a space-separated list of IDs, so we need to split them up and
+    // combine them into a single string.
+    let labels = labelledby
+      .split(' ')
+      .map((labelledby) => {
+        let labelEl = document.getElementById(labelledby)
+        if (labelEl) {
+          let label = labelEl.getAttribute('aria-label')
+          // Try to use the `aria-label` first (of the referenced element)
+          if (typeof label === 'string') return label.trim()
 
-      // This time, the `aria-labelledby` isn't used anymore (in Safari), so we just have to
-      // look at the contents itself.
-      return getTextContents(labelEl).trim()
-    }
+          // This time, the `aria-labelledby` isn't used anymore (in Safari), so we just have to
+          // look at the contents itself.
+          return getTextContents(labelEl).trim()
+        }
+
+        return null
+      })
+      .filter(Boolean)
+
+    if (labels.length > 0) return labels.join(', ')
   }
 
   // Try to use the text contents of the element itself

From 6524708eba304fff28979e45f79a857663ab3e46 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 4 May 2023 12:40:04 +0200
Subject: [PATCH 6/9] hoist regex

---
 .../@headlessui-react/src/utils/get-text-value.ts  | 14 +++++---------
 .../@headlessui-vue/src/utils/get-text-value.ts    | 14 +++++---------
 2 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/packages/@headlessui-react/src/utils/get-text-value.ts b/packages/@headlessui-react/src/utils/get-text-value.ts
index 256bc0ce8d..0bb7589ad1 100644
--- a/packages/@headlessui-react/src/utils/get-text-value.ts
+++ b/packages/@headlessui-react/src/utils/get-text-value.ts
@@ -1,3 +1,6 @@
+let emojiRegex =
+  /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g
+
 function getTextContents(element: HTMLElement): string {
   // Using innerText instad of textContent because:
   //
@@ -12,15 +15,8 @@ function getTextContents(element: HTMLElement): string {
 
   // Ideally we can use the much simpler RegEx: /\p{Extended_Pictographic}/u
   // but we can't rely on this yet, so we use the more complex one.
-  if (
-    /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/.test(
-      value
-    )
-  ) {
-    value = value.replace(
-      /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-      ''
-    )
+  if (emojiRegex.test(value)) {
+    value = value.replace(emojiRegex, '')
   }
 
   // Remove all the elements that shouldn't be there.
diff --git a/packages/@headlessui-vue/src/utils/get-text-value.ts b/packages/@headlessui-vue/src/utils/get-text-value.ts
index 256bc0ce8d..0bb7589ad1 100644
--- a/packages/@headlessui-vue/src/utils/get-text-value.ts
+++ b/packages/@headlessui-vue/src/utils/get-text-value.ts
@@ -1,3 +1,6 @@
+let emojiRegex =
+  /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g
+
 function getTextContents(element: HTMLElement): string {
   // Using innerText instad of textContent because:
   //
@@ -12,15 +15,8 @@ function getTextContents(element: HTMLElement): string {
 
   // Ideally we can use the much simpler RegEx: /\p{Extended_Pictographic}/u
   // but we can't rely on this yet, so we use the more complex one.
-  if (
-    /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/.test(
-      value
-    )
-  ) {
-    value = value.replace(
-      /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-      ''
-    )
+  if (emojiRegex.test(value)) {
+    value = value.replace(emojiRegex, '')
   }
 
   // Remove all the elements that shouldn't be there.

From 652e6282d77eb5ca00ff88fbd7534d902d1a48d1 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 4 May 2023 13:23:55 +0200
Subject: [PATCH 7/9] drop child nodes instead of replacing its innerText

This makes it a bit slower but also more correct. We can use a cache on
another level to ensure that we are not creating useless work.
---
 .../src/utils/get-text-value.ts               | 46 +++++++++++--------
 .../src/utils/get-text-value.ts               | 46 +++++++++++--------
 2 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/packages/@headlessui-react/src/utils/get-text-value.ts b/packages/@headlessui-react/src/utils/get-text-value.ts
index 0bb7589ad1..59685d86c9 100644
--- a/packages/@headlessui-react/src/utils/get-text-value.ts
+++ b/packages/@headlessui-react/src/utils/get-text-value.ts
@@ -2,22 +2,13 @@ let emojiRegex =
   /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g
 
 function getTextContents(element: HTMLElement): string {
-  // Using innerText instad of textContent because:
+  // Using innerText instead of textContent because:
   //
   // > textContent gets the content of all elements, including <script> and <style> elements. In
   // > contrast, innerText only shows "human-readable" elements.
   // >
   // > — https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext
-  let value = element.innerText ?? ''
-
-  // Check if it contains some emojis or not, if so, we need to remove them
-  // because ideally we work with simple text values.
-
-  // Ideally we can use the much simpler RegEx: /\p{Extended_Pictographic}/u
-  // but we can't rely on this yet, so we use the more complex one.
-  if (emojiRegex.test(value)) {
-    value = value.replace(emojiRegex, '')
-  }
+  let currentInnerText = element.innerText ?? ''
 
   // Remove all the elements that shouldn't be there.
   //
@@ -25,15 +16,30 @@ function getTextContents(element: HTMLElement): string {
   // [aria-hidden]  — The screen reader doesn't see it
   // [role="img"]   — Even if it is text, it is used as an image
   //
-  // This is probably the slowest part, but if you want complete control over the text value,
-  // you better set an `aria-label` instead.
-  let children = element.querySelectorAll('[hidden],[aria-hidden],[role="img"]')
-  if (children.length > 0) {
-    for (let el of children) {
-      if (el instanceof HTMLElement) {
-        value = value.replace(el.innerText ?? '', '')
-      }
-    }
+  // This is probably the slowest part, but if you want complete control over the text value, then
+  // it is better to set an `aria-label` instead.
+  let copy = element.cloneNode(true)
+  if (!(copy instanceof HTMLElement)) {
+    return currentInnerText
+  }
+
+  let dropped = false
+  // Drop the elements that shouldn't be there.
+  for (let child of copy.querySelectorAll('[hidden],[aria-hidden],[role="img"]')) {
+    child.remove()
+    dropped = true
+  }
+
+  // Now that the elements are removed, we can get the innerText such that we can strip the emojis.
+  let value = dropped ? copy.innerText ?? '' : currentInnerText
+
+  // Check if it contains some emojis or not, if so, we need to remove them
+  // because ideally we work with simple text values.
+  //
+  // Ideally we can use the much simpler RegEx: /\p{Extended_Pictographic}/u
+  // but we can't rely on this yet, so we use the more complex one.
+  if (emojiRegex.test(value)) {
+    value = value.replace(emojiRegex, '')
   }
 
   return value
diff --git a/packages/@headlessui-vue/src/utils/get-text-value.ts b/packages/@headlessui-vue/src/utils/get-text-value.ts
index 0bb7589ad1..59685d86c9 100644
--- a/packages/@headlessui-vue/src/utils/get-text-value.ts
+++ b/packages/@headlessui-vue/src/utils/get-text-value.ts
@@ -2,22 +2,13 @@ let emojiRegex =
   /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g
 
 function getTextContents(element: HTMLElement): string {
-  // Using innerText instad of textContent because:
+  // Using innerText instead of textContent because:
   //
   // > textContent gets the content of all elements, including <script> and <style> elements. In
   // > contrast, innerText only shows "human-readable" elements.
   // >
   // > — https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext
-  let value = element.innerText ?? ''
-
-  // Check if it contains some emojis or not, if so, we need to remove them
-  // because ideally we work with simple text values.
-
-  // Ideally we can use the much simpler RegEx: /\p{Extended_Pictographic}/u
-  // but we can't rely on this yet, so we use the more complex one.
-  if (emojiRegex.test(value)) {
-    value = value.replace(emojiRegex, '')
-  }
+  let currentInnerText = element.innerText ?? ''
 
   // Remove all the elements that shouldn't be there.
   //
@@ -25,15 +16,30 @@ function getTextContents(element: HTMLElement): string {
   // [aria-hidden]  — The screen reader doesn't see it
   // [role="img"]   — Even if it is text, it is used as an image
   //
-  // This is probably the slowest part, but if you want complete control over the text value,
-  // you better set an `aria-label` instead.
-  let children = element.querySelectorAll('[hidden],[aria-hidden],[role="img"]')
-  if (children.length > 0) {
-    for (let el of children) {
-      if (el instanceof HTMLElement) {
-        value = value.replace(el.innerText ?? '', '')
-      }
-    }
+  // This is probably the slowest part, but if you want complete control over the text value, then
+  // it is better to set an `aria-label` instead.
+  let copy = element.cloneNode(true)
+  if (!(copy instanceof HTMLElement)) {
+    return currentInnerText
+  }
+
+  let dropped = false
+  // Drop the elements that shouldn't be there.
+  for (let child of copy.querySelectorAll('[hidden],[aria-hidden],[role="img"]')) {
+    child.remove()
+    dropped = true
+  }
+
+  // Now that the elements are removed, we can get the innerText such that we can strip the emojis.
+  let value = dropped ? copy.innerText ?? '' : currentInnerText
+
+  // Check if it contains some emojis or not, if so, we need to remove them
+  // because ideally we work with simple text values.
+  //
+  // Ideally we can use the much simpler RegEx: /\p{Extended_Pictographic}/u
+  // but we can't rely on this yet, so we use the more complex one.
+  if (emojiRegex.test(value)) {
+    value = value.replace(emojiRegex, '')
   }
 
   return value

From c5e7bab2ffe2f2e437dbc3f9f73abd32861ae1f4 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 4 May 2023 13:24:40 +0200
Subject: [PATCH 8/9] add `useTextValue` to improve performance of
 `getTextValue`

This will add a cache and only if the `innerText` changes, only then
will we calculate the new text value.
---
 .../src/hooks/use-text-value.ts               | 25 +++++++++++++++++++
 .../src/hooks/use-text-value.ts               | 25 +++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 packages/@headlessui-react/src/hooks/use-text-value.ts
 create mode 100644 packages/@headlessui-vue/src/hooks/use-text-value.ts

diff --git a/packages/@headlessui-react/src/hooks/use-text-value.ts b/packages/@headlessui-react/src/hooks/use-text-value.ts
new file mode 100644
index 0000000000..69777f545b
--- /dev/null
+++ b/packages/@headlessui-react/src/hooks/use-text-value.ts
@@ -0,0 +1,25 @@
+import { useRef, MutableRefObject } from 'react'
+import { getTextValue } from '../utils/get-text-value'
+import { useEvent } from './use-event'
+
+export function useTextValue(element: MutableRefObject<HTMLElement | null>) {
+  let cacheKey = useRef<string>('')
+  let cacheValue = useRef<string>('')
+
+  return useEvent(() => {
+    let el = element.current
+    if (!el) return ''
+
+    // Check for a cached version
+    let currentKey = el.innerText
+    if (cacheKey.current === currentKey) {
+      return cacheValue.current
+    }
+
+    // Calculate the value
+    let value = getTextValue(el).trim().toLowerCase()
+    cacheKey.current = currentKey
+    cacheValue.current = value
+    return value
+  })
+}
diff --git a/packages/@headlessui-vue/src/hooks/use-text-value.ts b/packages/@headlessui-vue/src/hooks/use-text-value.ts
new file mode 100644
index 0000000000..934f02a57b
--- /dev/null
+++ b/packages/@headlessui-vue/src/hooks/use-text-value.ts
@@ -0,0 +1,25 @@
+import { ref, Ref } from 'vue'
+import { getTextValue } from '../utils/get-text-value'
+import { dom } from '../utils/dom'
+
+export function useTextValue(element: Ref<HTMLElement | null>) {
+  let cacheKey = ref<string>('')
+  let cacheValue = ref<string>('')
+
+  return () => {
+    let el = dom(element)
+    if (!el) return ''
+
+    // Check for a cached version
+    let currentKey = el.innerText
+    if (cacheKey.value === currentKey) {
+      return cacheValue.value
+    }
+
+    // Calculate the value
+    let value = getTextValue(el).trim().toLowerCase()
+    cacheKey.value = currentKey
+    cacheValue.value = value
+    return value
+  }
+}

From 054eb97939f34eec47ea76a38d5a969111fe2967 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 4 May 2023 14:27:51 +0200
Subject: [PATCH 9/9] use better `useTextValue` hook

---
 .../src/components/listbox/listbox.tsx                 |  9 +++------
 .../@headlessui-react/src/components/menu/menu.tsx     | 10 ++++------
 .../@headlessui-vue/src/components/listbox/listbox.ts  |  9 +++------
 packages/@headlessui-vue/src/components/menu/menu.ts   |  9 +++------
 4 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
index f649aaeb42..db4652252d 100644
--- a/packages/@headlessui-react/src/components/listbox/listbox.tsx
+++ b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -48,7 +48,7 @@ import { useEvent } from '../../hooks/use-event'
 import { useControllable } from '../../hooks/use-controllable'
 import { useLatestValue } from '../../hooks/use-latest-value'
 import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
-import { getTextValue } from '../../utils/get-text-value'
+import { useTextValue } from '../../hooks/use-text-value'
 
 enum ListboxStates {
   Open,
@@ -935,16 +935,13 @@ function OptionFn<
 
   let selected = data.isSelected(value)
   let internalOptionRef = useRef<HTMLLIElement | null>(null)
+  let getTextValue = useTextValue(internalOptionRef)
   let bag = useLatestValue<ListboxOptionDataRef<TType>['current']>({
     disabled,
     value,
     domRef: internalOptionRef,
     get textValue() {
-      let element = internalOptionRef.current
-      if (element) {
-        return getTextValue(element).trim().toLowerCase()
-      }
-      return ''
+      return getTextValue()
     },
   })
   let optionRef = useSyncRefs(ref, internalOptionRef)
diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx
index 96971faacc..24769a528a 100644
--- a/packages/@headlessui-react/src/components/menu/menu.tsx
+++ b/packages/@headlessui-react/src/components/menu/menu.tsx
@@ -51,7 +51,7 @@ import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 import { useOwnerDocument } from '../../hooks/use-owner'
 import { useEvent } from '../../hooks/use-event'
 import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
-import { getTextValue } from '../../utils/get-text-value'
+import { useTextValue } from '../../hooks/use-text-value'
 
 enum MenuStates {
   Open,
@@ -637,15 +637,13 @@ function ItemFn<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(
     /* We also want to trigger this when the position of the active item changes so that we can re-trigger the scrollIntoView */ state.activeItemIndex,
   ])
 
+  let getTextValue = useTextValue(internalItemRef)
+
   let bag = useRef<MenuItemDataRef['current']>({
     disabled,
     domRef: internalItemRef,
     get textValue() {
-      let element = internalItemRef.current
-      if (element) {
-        return getTextValue(element).trim().toLowerCase()
-      }
-      return ''
+      return getTextValue()
     },
   })
 
diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.ts b/packages/@headlessui-vue/src/components/listbox/listbox.ts
index 8f3e468b08..2fb49eee49 100644
--- a/packages/@headlessui-vue/src/components/listbox/listbox.ts
+++ b/packages/@headlessui-vue/src/components/listbox/listbox.ts
@@ -35,7 +35,7 @@ import { Hidden, Features as HiddenFeatures } from '../../internal/hidden'
 import { objectToFormEntries } from '../../utils/form'
 import { useControllable } from '../../hooks/use-controllable'
 import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
-import { getTextValue } from '../../utils/get-text-value'
+import { useTextValue } from '../../hooks/use-text-value'
 
 function defaultComparator<T>(a: T, z: T): boolean {
   return a === z
@@ -732,15 +732,12 @@ export let ListboxOption = defineComponent({
       })
     })
 
+    let getTextValue = useTextValue(internalOptionRef)
     let dataRef = computed<ListboxOptionData>(() => ({
       disabled: props.disabled,
       value: props.value,
       get textValue() {
-        let element = dom(internalOptionRef)
-        if (element) {
-          return getTextValue(element).trim().toLowerCase()
-        }
-        return ''
+        return getTextValue()
       },
       domRef: internalOptionRef,
     }))
diff --git a/packages/@headlessui-vue/src/components/menu/menu.ts b/packages/@headlessui-vue/src/components/menu/menu.ts
index c61c6e629a..cad0443c90 100644
--- a/packages/@headlessui-vue/src/components/menu/menu.ts
+++ b/packages/@headlessui-vue/src/components/menu/menu.ts
@@ -32,7 +32,7 @@ import {
 } from '../../utils/focus-management'
 import { useOutsideClick } from '../../hooks/use-outside-click'
 import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
-import { getTextValue } from '../../utils/get-text-value'
+import { useTextValue } from '../../hooks/use-text-value'
 
 enum MenuStates {
   Open,
@@ -512,14 +512,11 @@ export let MenuItem = defineComponent({
         : false
     })
 
+    let getTextValue = useTextValue(internalItemRef)
     let dataRef = computed<MenuItemData>(() => ({
       disabled: props.disabled,
       get textValue() {
-        let element = dom(internalItemRef)
-        if (element) {
-          return getTextValue(element).trim().toLowerCase()
-        }
-        return ''
+        return getTextValue()
       },
       domRef: internalItemRef,
     }))