From 9d885b8f95a91a967d5c2dd4389269e8deb90c8b Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Thu, 23 Jan 2025 19:11:51 +0100
Subject: [PATCH] fixup! fixup! refactor(utils): Replace `GenRandomId` with
 `getRandomId`

---
 .../NcActionButtonGroup/NcActionButtonGroup.vue           | 4 ++--
 src/components/NcActionCheckbox/NcActionCheckbox.vue      | 4 ++--
 src/components/NcActionInput/NcActionInput.vue            | 6 +++---
 src/components/NcActionRadio/NcActionRadio.vue            | 4 ++--
 .../NcActionTextEditable/NcActionTextEditable.vue         | 6 +++---
 src/components/NcActions/NcActions.vue                    | 4 ++--
 .../NcAppNavigationItem/NcAppNavigationItem.vue           | 4 ++--
 src/components/NcAppSidebar/NcAppSidebar.vue              | 4 ++--
 src/components/NcBreadcrumb/NcBreadcrumb.vue              | 4 ++--
 .../NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue       | 4 ++--
 src/components/NcColorPicker/NcColorPicker.vue            | 4 ++--
 src/components/NcDateTimePicker/NcDateTimePicker.vue      | 4 ++--
 src/components/NcDialog/NcDialog.vue                      | 4 ++--
 src/components/NcHeaderButton/NcHeaderButton.vue          | 4 ++--
 src/components/NcHeaderMenu/NcHeaderMenu.vue              | 6 +++---
 src/components/NcInputField/NcInputField.vue              | 4 ++--
 src/components/NcModal/NcModal.vue                        | 4 ++--
 .../NcRichContenteditable/NcRichContenteditable.vue       | 8 ++++----
 src/components/NcRichText/NcRichText.vue                  | 8 ++++----
 src/components/NcSelect/NcSelect.vue                      | 6 +++---
 .../NcSettingsInputText/NcSettingsInputText.vue           | 4 ++--
 .../NcSettingsSelectGroup/NcSettingsSelectGroup.vue       | 6 +++---
 src/components/NcTextArea/NcTextArea.vue                  | 4 ++--
 src/components/NcTimezonePicker/NcTimezonePicker.vue      | 4 ++--
 24 files changed, 57 insertions(+), 57 deletions(-)

diff --git a/src/components/NcActionButtonGroup/NcActionButtonGroup.vue b/src/components/NcActionButtonGroup/NcActionButtonGroup.vue
index 1bd8901a3c..2c56e74b03 100644
--- a/src/components/NcActionButtonGroup/NcActionButtonGroup.vue
+++ b/src/components/NcActionButtonGroup/NcActionButtonGroup.vue
@@ -87,7 +87,7 @@ export default {
 
 <script>
 import { defineComponent } from 'vue'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 import { t } from '../../l10n.js'
 
 /**
@@ -116,7 +116,7 @@ export default defineComponent({
 
 	setup() {
 		return {
-			labelId: `nc-action-button-group-${getRandomId()}`,
+			labelId: `nc-action-button-group-${getElementId()}`,
 		}
 	},
 
diff --git a/src/components/NcActionCheckbox/NcActionCheckbox.vue b/src/components/NcActionCheckbox/NcActionCheckbox.vue
index 2f2f8b4978..617ff4c0ee 100644
--- a/src/components/NcActionCheckbox/NcActionCheckbox.vue
+++ b/src/components/NcActionCheckbox/NcActionCheckbox.vue
@@ -39,7 +39,7 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 
 <script>
 import ActionGlobalMixin from '../../mixins/actionGlobal.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 export default {
 	name: 'NcActionCheckbox',
@@ -59,7 +59,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'action-' + getRandomId(),
+			default: () => 'action-' + getElementId(),
 			validator: id => id.trim() !== '',
 		},
 
diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue
index c54173e976..ab4ed86891 100644
--- a/src/components/NcActionInput/NcActionInput.vue
+++ b/src/components/NcActionInput/NcActionInput.vue
@@ -246,7 +246,7 @@ import NcPasswordField from '../NcPasswordField/index.js'
 import NcSelect from '../NcSelect/index.js'
 import NcTextField from '../NcTextField/index.js'
 import ActionGlobalMixin from '../../mixins/actionGlobal.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 import { t } from '../../l10n.js'
 
 export default {
@@ -270,7 +270,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'action-' + getRandomId(),
+			default: () => 'action-' + getElementId(),
 			validator: id => id.trim() !== '',
 		},
 		/**
@@ -278,7 +278,7 @@ export default {
 		 */
 		inputId: {
 			type: String,
-			default: () => 'action-input-' + getRandomId(),
+			default: () => 'action-input-' + getElementId(),
 			validator: id => id.trim() !== '',
 		},
 		/**
diff --git a/src/components/NcActionRadio/NcActionRadio.vue b/src/components/NcActionRadio/NcActionRadio.vue
index 8351cd5be1..65868d7ef9 100644
--- a/src/components/NcActionRadio/NcActionRadio.vue
+++ b/src/components/NcActionRadio/NcActionRadio.vue
@@ -42,7 +42,7 @@ So that only one of each name set can be selected at the same time.
 
 <script>
 import ActionGlobalMixin from '../../mixins/actionGlobal.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 export default {
 	name: 'NcActionRadio',
@@ -62,7 +62,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'action-' + getRandomId(),
+			default: () => 'action-' + getElementId(),
 			validator: id => id.trim() !== '',
 		},
 
diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue
index f58381addf..721bdb6638 100644
--- a/src/components/NcActionTextEditable/NcActionTextEditable.vue
+++ b/src/components/NcActionTextEditable/NcActionTextEditable.vue
@@ -83,7 +83,7 @@ export default {
 
 <script>
 import ActionTextMixin from '../../mixins/actionText.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 
@@ -102,7 +102,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'action-' + getRandomId(),
+			default: () => 'action-' + getElementId(),
 			validator: id => id.trim() !== '',
 		},
 		/**
@@ -138,7 +138,7 @@ export default {
 		},
 
 		computedId() {
-			return getRandomId()
+			return getElementId()
 		},
 	},
 
diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
index 188d1f1dd9..e4b6b257d1 100644
--- a/src/components/NcActions/NcActions.vue
+++ b/src/components/NcActions/NcActions.vue
@@ -925,7 +925,7 @@ import { t } from '../../l10n.js'
 
 import NcButton from '../NcButton/index.ts'
 import NcPopover from '../NcPopover/index.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 import isSlotPopulated from '../../utils/isSlotPopulated.ts'
 
 import IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
@@ -1112,7 +1112,7 @@ export default {
 	],
 
 	setup(props) {
-		const randomId = `menu-${getRandomId()}`
+		const randomId = `menu-${getElementId()}`
 		const triggerRandomId = `trigger-${randomId}`
 
 		const triggerButton = ref()
diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
index 3471cc936a..dd13667bbb 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -399,7 +399,7 @@ import NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue
 import { useIsMobile } from '../../composables/useIsMobile/index.js'
 import NcInputConfirmCancel from './NcInputConfirmCancel.vue'
 import { t } from '../../l10n.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Undo from 'vue-material-design-icons/Undo.vue'
@@ -449,7 +449,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'app-navigation-item-' + getRandomId(),
+			default: () => 'app-navigation-item-' + getElementId(),
 			validator: id => id.trim() !== '',
 		},
 
diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
index e30cf06261..4fa1ab5e13 100644
--- a/src/components/NcAppSidebar/NcAppSidebar.vue
+++ b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -712,7 +712,7 @@ import NcEmptyContent from '../NcEmptyContent/index.js'
 import Focus from '../../directives/Focus/index.js'
 import Linkify from '../../directives/Linkify/index.js'
 import { useIsSmallMobile } from '../../composables/useIsMobile/index.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 import { getTrapStack } from '../../utils/focusTrap.js'
 import { t } from '../../l10n.js'
 import isSlotPopulated from '../../utils/isSlotPopulated.ts'
@@ -924,7 +924,7 @@ export default {
 
 	setup() {
 		return {
-			uid: getRandomId(),
+			uid: getElementId(),
 			isMobile: useIsSmallMobile(),
 		}
 	},
diff --git a/src/components/NcBreadcrumb/NcBreadcrumb.vue b/src/components/NcBreadcrumb/NcBreadcrumb.vue
index 055069e065..7c19e075b7 100644
--- a/src/components/NcBreadcrumb/NcBreadcrumb.vue
+++ b/src/components/NcBreadcrumb/NcBreadcrumb.vue
@@ -61,7 +61,7 @@ Renders a button element when given no redirection props, otherwise, renders <a/
 
 <script>
 import NcActions from '../NcActions/index.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 import NcButton from '../NcButton/NcButton.vue'
 
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
@@ -172,7 +172,7 @@ export default {
 			 * The unique id of the breadcrumb. Necessary to append the
 			 * Actions menu to the correct crumb.
 			 */
-			crumbId: `crumb-id-${getRandomId()}`,
+			crumbId: `crumb-id-${getElementId()}`,
 		}
 	},
 	computed: {
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
index 8a0f38a2b0..f9f4f7a06d 100644
--- a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
+++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -303,7 +303,7 @@ export default {
 
 <script>
 import NcCheckboxContent, { TYPE_BUTTON, TYPE_CHECKBOX, TYPE_RADIO, TYPE_SWITCH } from './NcCheckboxContent.vue'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 import { t, n } from '../../l10n.js'
 
 export default {
@@ -322,7 +322,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'checkbox-radio-switch-' + getRandomId(),
+			default: () => 'checkbox-radio-switch-' + getElementId(),
 			validator: id => id.trim() !== '',
 		},
 
diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue
index 2100b2b35e..406fc4841b 100644
--- a/src/components/NcColorPicker/NcColorPicker.vue
+++ b/src/components/NcColorPicker/NcColorPicker.vue
@@ -205,7 +205,7 @@ import NcPopover from '../NcPopover/index.js'
 import { t } from '../../l10n.js'
 import { defaultPalette } from '../../utils/GenColors.js'
 
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import Check from 'vue-material-design-icons/Check.vue'
@@ -306,7 +306,7 @@ export default defineComponent({
 		},
 
 		uid() {
-			return getRandomId()
+			return getElementId()
 		},
 		contrastColor() {
 			const black = '#000000'
diff --git a/src/components/NcDateTimePicker/NcDateTimePicker.vue b/src/components/NcDateTimePicker/NcDateTimePicker.vue
index c13be19f80..16bf845568 100644
--- a/src/components/NcDateTimePicker/NcDateTimePicker.vue
+++ b/src/components/NcDateTimePicker/NcDateTimePicker.vue
@@ -157,7 +157,7 @@ export default {
 
 <script>
 import { t } from '../../l10n.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 import NcTimezonePicker from '../NcTimezonePicker/index.js'
 import NcPopover from '../NcPopover/index.js'
@@ -280,7 +280,7 @@ export default ScopeComponent({
 
 	setup() {
 		return {
-			timezoneDialogHeaderId: `timezone-dialog-header-${getRandomId()}`,
+			timezoneDialogHeaderId: `timezone-dialog-header-${getElementId()}`,
 		}
 	},
 
diff --git a/src/components/NcDialog/NcDialog.vue b/src/components/NcDialog/NcDialog.vue
index e0f85ec526..803aa4925d 100644
--- a/src/components/NcDialog/NcDialog.vue
+++ b/src/components/NcDialog/NcDialog.vue
@@ -261,7 +261,7 @@ import { computed, defineComponent, ref } from 'vue'
 import NcModal from '../NcModal/index.js'
 import NcDialogButton from '../NcDialogButton/index.js'
 
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 type NcDialogButtonProps = ComponentProps<typeof NcDialogButton>
 
@@ -475,7 +475,7 @@ export default defineComponent({
 		/**
 		 * The unique id of the nav element
 		 */
-		const navigationId = getRandomId()
+		const navigationId = getElementId()
 
 		/**
 		 * aria-label attribute for the nav element
diff --git a/src/components/NcHeaderButton/NcHeaderButton.vue b/src/components/NcHeaderButton/NcHeaderButton.vue
index 21edb84543..3eb9c72570 100644
--- a/src/components/NcHeaderButton/NcHeaderButton.vue
+++ b/src/components/NcHeaderButton/NcHeaderButton.vue
@@ -86,7 +86,7 @@ export default {
 </template>
 
 <script setup lang="ts">
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 import NcButton, { ButtonType } from '../NcButton/index.js'
 
 defineProps<{
@@ -102,7 +102,7 @@ defineEmits<{
 	click: [event: MouseEvent]
 }>()
 
-const descriptionId = getRandomId()
+const descriptionId = getElementId()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/NcHeaderMenu/NcHeaderMenu.vue b/src/components/NcHeaderMenu/NcHeaderMenu.vue
index 74634c6657..41949911c4 100644
--- a/src/components/NcHeaderMenu/NcHeaderMenu.vue
+++ b/src/components/NcHeaderMenu/NcHeaderMenu.vue
@@ -109,7 +109,7 @@ import { vOnClickOutside as ClickOutside } from '@vueuse/components'
 import { createFocusTrap } from 'focus-trap'
 
 import { clickOutsideOptions } from '../../mixins/index.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 import { getTrapStack } from '../../utils/focusTrap.js'
 
 import NcButton from '../NcButton/index.ts'
@@ -189,8 +189,8 @@ export default {
 			focusTrap: null,
 			opened: this.open,
 			shortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),
-			triggerId: getRandomId(),
-			descriptionId: getRandomId(),
+			triggerId: getElementId(),
+			descriptionId: getElementId(),
 		}
 	},
 
diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
index 12473ac5b9..6a800ec71f 100644
--- a/src/components/NcInputField/NcInputField.vue
+++ b/src/components/NcInputField/NcInputField.vue
@@ -92,7 +92,7 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 
 <script>
 import NcButton from '../NcButton/index.ts'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 import AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'
 import Check from 'vue-material-design-icons/Check.vue'
@@ -259,7 +259,7 @@ export default {
 		},
 
 		inputName() {
-			return 'input' + getRandomId()
+			return 'input' + getElementId()
 		},
 
 		hasTrailingIcon() {
diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue
index e600666bf3..7b284feee2 100644
--- a/src/components/NcModal/NcModal.vue
+++ b/src/components/NcModal/NcModal.vue
@@ -330,7 +330,7 @@ import { warn as VueWarn } from 'vue'
 
 import { getTrapStack } from '../../utils/focusTrap.js'
 import { t } from '../../l10n.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 import NcActions from '../NcActions/index.js'
 import NcButton from '../NcButton/index.ts'
 import Timer from '../../utils/Timer.js'
@@ -543,7 +543,7 @@ export default {
 			iconSize: 24,
 			focusTrap: null,
 			externalFocusTrapStack: [],
-			randId: getRandomId(),
+			randId: getElementId(),
 			internalShow: true,
 		}
 	},
diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
index 6fcc7bcf12..aacc6e4afd 100644
--- a/src/components/NcRichContenteditable/NcRichContenteditable.vue
+++ b/src/components/NcRichContenteditable/NcRichContenteditable.vue
@@ -294,7 +294,7 @@ import { searchProvider, getLinkWithPicker } from '../NcRichText/index.js'
 import Tribute from 'tributejs/dist/tribute.esm.js'
 import debounce from 'debounce'
 import stringLength from 'string-length'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 /**
  * Populate the list of text smiles we want to offer via Tribute.
@@ -324,7 +324,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => getRandomId(7),
+			default: () => getElementId(7),
 		},
 
 		/**
@@ -425,7 +425,7 @@ export default {
 	],
 
 	setup() {
-		const uid = getRandomId(5)
+		const uid = getElementId(5)
 		return {
 			// Constants
 			labelId: `nc-rich-contenteditable-${uid}-label`,
@@ -559,7 +559,7 @@ export default {
 		},
 
 		initializeTribute() {
-			const renderMenuItem = (content) => `<div id="nc-rich-contenteditable-tribute-item-${getRandomId(5)}" class="${this.$style['tribute-item']}" role="option">${content}</div>`
+			const renderMenuItem = (content) => `<div id="nc-rich-contenteditable-tribute-item-${getElementId(5)}" class="${this.$style['tribute-item']}" role="option">${content}</div>`
 
 			const tributesCollection = []
 			tributesCollection.push({
diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue
index f850360173..d2d046fa54 100644
--- a/src/components/NcRichText/NcRichText.vue
+++ b/src/components/NcRichText/NcRichText.vue
@@ -98,7 +98,7 @@ Table row | value A | value B
 ---
 
 \`\`\`js
-const getRandomId = (length) => {
+const getElementId = (length) => {
 \treturn Math.random()
 \t\t.toString(36)
 \t\t.replace(/[^a-z]+/g, '')
@@ -307,7 +307,7 @@ import NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/NcCheckboxRadioSwitc
 import NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'
 import { getRoute, remarkAutolink } from './autolink.ts'
 import { remarkPlaceholder, prepareTextNode } from './placeholder.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 import { unified } from 'unified'
 import remarkParse from 'remark-parse'
@@ -419,7 +419,7 @@ export default {
 
 	data() {
 		return {
-			parentId: getRandomId(5),
+			parentId: getElementId(5),
 		}
 	},
 
@@ -556,7 +556,7 @@ export default {
 							labelParts.splice(nestedNodeIndex)
 						}
 
-						const id = this.parentId + '-markdown-input-' + getRandomId(5)
+						const id = this.parentId + '-markdown-input-' + getElementId(5)
 						const propsToForward = { ...inputNode.props }
 						// The checked prop is name modelValue for NcCheckboxRadioSwitch
 						delete propsToForward.checked
diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
index 927011e289..df5b8eda1f 100644
--- a/src/components/NcSelect/NcSelect.vue
+++ b/src/components/NcSelect/NcSelect.vue
@@ -583,7 +583,7 @@ import NcEllipsisedOption from '../NcEllipsisedOption/index.js'
 import NcListItemIcon from '../NcListItemIcon/index.js'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
 
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 export default {
 	name: 'NcSelect',
@@ -758,7 +758,7 @@ export default {
 		 */
 		inputId: {
 			type: String,
-			default: () => `select-input-${getRandomId()}`,
+			default: () => `select-input-${getElementId()}`,
 		},
 
 		/**
@@ -894,7 +894,7 @@ export default {
 		 */
 		uid: {
 			type: String,
-			default: () => getRandomId(),
+			default: () => getElementId(),
 		},
 
 		/**
diff --git a/src/components/NcSettingsInputText/NcSettingsInputText.vue b/src/components/NcSettingsInputText/NcSettingsInputText.vue
index 7c63057fa1..b459ab5277 100644
--- a/src/components/NcSettingsInputText/NcSettingsInputText.vue
+++ b/src/components/NcSettingsInputText/NcSettingsInputText.vue
@@ -37,7 +37,7 @@
 
 <script>
 import { t } from '../../l10n.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 export default {
 	name: 'NcSettingsInputText',
@@ -79,7 +79,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'settings-input-text-' + getRandomId(),
+			default: () => 'settings-input-text-' + getElementId(),
 			validator: id => id.trim() !== '',
 		},
 	},
diff --git a/src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue b/src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue
index 061ecf3d33..74391ac6b8 100644
--- a/src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue
+++ b/src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue
@@ -54,7 +54,7 @@ section * {
 <script>
 import NcSelect from '../../components/NcSelect/index.js'
 import { t } from '../../l10n.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 import axios from '@nextcloud/axios'
 import debounce from 'debounce'
@@ -89,7 +89,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'action-' + getRandomId(),
+			default: () => 'action-' + getElementId(),
 			validator: id => id.trim() !== '',
 		},
 
@@ -119,7 +119,7 @@ export default {
 		return {
 			/** Temporary store to cache groups */
 			groups: {},
-			randId: getRandomId(),
+			randId: getElementId(),
 			errorMessage: '',
 		}
 	},
diff --git a/src/components/NcTextArea/NcTextArea.vue b/src/components/NcTextArea/NcTextArea.vue
index 27592ddb0c..259d957924 100644
--- a/src/components/NcTextArea/NcTextArea.vue
+++ b/src/components/NcTextArea/NcTextArea.vue
@@ -113,7 +113,7 @@ export default {
 </template>
 
 <script>
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 import AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'
 import Check from 'vue-material-design-icons/Check.vue'
@@ -234,7 +234,7 @@ export default {
 		},
 
 		inputName() {
-			return 'input' + getRandomId()
+			return 'input' + getElementId()
 		},
 
 		hasPlaceholder() {
diff --git a/src/components/NcTimezonePicker/NcTimezonePicker.vue b/src/components/NcTimezonePicker/NcTimezonePicker.vue
index 67fa65e304..8d6236f7dd 100644
--- a/src/components/NcTimezonePicker/NcTimezonePicker.vue
+++ b/src/components/NcTimezonePicker/NcTimezonePicker.vue
@@ -44,7 +44,7 @@ import {
 	getSortedTimezoneList,
 } from './timezone.js'
 import getTimezoneManager from './timezoneDataProviderService.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 import NcSelect from '../NcSelect/index.js'
 import { t } from '../../l10n.js'
 
@@ -73,7 +73,7 @@ export default {
 		 */
 		uid: {
 			type: [String, Number],
-			default: () => `tz-${getRandomId(5)}`,
+			default: () => `tz-${getElementId(5)}`,
 		},
 	},
 	emits: ['update:modelValue'],