fix: collapsible section chevron bug, misc refactors [TDX-6738] (#738)

* fix: collapsible section chevron bug [TDX-6738]

* refactor: use usetemplateref for template refs [TDX-6738]

* refactor: use useeventlistener [TDX-6738]

* fix: minor fix

* fix: apply pr feedback

Co-authored-by: Afroz Hussain <[email protected]>
Co-authored-by: Vaibhav Raj Singh <[email protected]>

* fix: address pr feedback

* fix: lint:fix

---------

Co-authored-by: Afroz Hussain <[email protected]>
Co-authored-by: Vaibhav Raj Singh <[email protected]>

Author: 3 people

sandbox/components/SampleSpecSelector.vue

@@ -45,15 +45,15 @@
     </select>
 
     <button
-      ref="dropZoneRef"
+      ref="dropZone"
       class="dropzone"
       @click="dropzoneClick()"
     >
       {{ fName }}
     </button>
 
     <input
-      ref="fileInputRef"
+      ref="fileInput"
       style="position: absolute; visibility: hidden;"
       type="file"
       @change="finputChange"
@@ -62,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, useTemplateRef } from 'vue'
 import type { PropType } from 'vue'
 import { useDropZone } from '@vueuse/core'
 
@@ -83,8 +83,8 @@ const emit = defineEmits<{
 }>()
 
 const specSelector = ref<HTMLSelectElement | null>(null)
-const dropZoneRef = ref<HTMLDivElement>()
-const fileInputRef = ref<HTMLInputElement>()
+const dropZoneRef = useTemplateRef('dropZone')
+const fileInputRef = useTemplateRef('fileInput')
 const savedSpec = ref()
 
 const fName = ref<string>('Drop your own spec file')

src/components/SpecRenderer.vue

@@ -10,7 +10,6 @@
       >
         <SpecRendererToc
           v-if="slideoutTocVisible"
-          ref="specRendererSlideoutTocRef"
           :base-path="basePath"
           class="spec-renderer-toc"
           :control-address-bar="controlAddressBar"
@@ -25,7 +24,6 @@
       <aside>
         <SpecRendererToc
           v-if="tableOfContents && !slideoutTocVisible"
-          ref="specRendererTocRef"
           :base-path="basePath"
           class="spec-renderer-toc"
           :control-address-bar="controlAddressBar"

src/components/common/CopyButton.vue

@@ -1,6 +1,5 @@
 <template>
   <button
-    ref="copyButton"
     class="copy-button"
     :title="copied ? 'Copied!' : 'Copy'"
     @click.stop="copyCode"
@@ -14,7 +13,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import { CopyIcon, CheckIcon } from '@kong/icons'
 import { useClipboard } from '@vueuse/core'
 
@@ -33,7 +31,6 @@ const props = defineProps({
   },
 })
 
-const copyButton = ref<HTMLButtonElement>()
 const { copy, copied } = useClipboard({ source: props.content, legacy: true })
 
 async function copyCode(): Promise<void> {

src/components/common/EditableCodeBlock.vue

@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 
-import { ref, watch } from 'vue'
+import { ref, useTemplateRef, watch } from 'vue'
 import CodeBlock from './CodeBlock.vue'
 import { CODE_INDENT_SPACES } from '@/constants'
 
@@ -59,7 +59,7 @@ const formatCode = (codeToFormat: string, codeLang: string): string => {
 }
 
 // ref to contentEditable element
-const editableInput = ref<HTMLDivElement | null>()
+const editableInputRef = useTemplateRef('editableInput')
 
 // to hold editable code content
 const editableCode = ref<string>(formatCode(props.code, props.lang))
@@ -77,7 +77,7 @@ const cursorPosition = ref<number>(0)
  * @param eol  (boolean, when true cursor is set to the end of the line)
  */
 const setCursorPosition = (customPosition: number, eol: boolean) => {
-  if (typeof window === 'undefined' || !editableInput.value || !editableInput.value.childNodes[0]) {
+  if (typeof window === 'undefined' || !editableInputRef.value || !editableInputRef.value.childNodes[0]) {
     return
   }
   // select text from a window
@@ -87,24 +87,24 @@ const setCursorPosition = (customPosition: number, eol: boolean) => {
   const selectedRange = document.createRange()
   let rangeNode = 0
   let rangePos = customPosition
-  for (let i = 0; i < editableInput.value.childNodes.length; i++) {
-    const contentLen = (editableInput.value.childNodes[i]?.textContent || '').length
+  for (let i = 0; i < editableInputRef.value.childNodes.length; i++) {
+    const contentLen = (editableInputRef.value.childNodes[i]?.textContent || '').length
     if (rangePos - contentLen <= 0) {
       break
     }
     rangeNode++
     rangePos -= contentLen
-    if (editableInput.value.childNodes[i]?.nodeName === 'BR') {
+    if (editableInputRef.value.childNodes[i]?.nodeName === 'BR') {
       rangePos--
     }
   }
 
-  if (!editableInput.value.childNodes[rangeNode]) return
+  if (!editableInputRef.value.childNodes[rangeNode]) return
 
   if (eol) {
-    rangePos = editableInput.value.childNodes[rangeNode].textContent?.length || 0
+    rangePos = editableInputRef.value.childNodes[rangeNode].textContent?.length || 0
   }
-  selectedRange.setStart(editableInput.value.childNodes[rangeNode], rangePos)
+  selectedRange.setStart(editableInputRef.value.childNodes[rangeNode], rangePos)
   // collapse the range at boundaries
   selectedRange.collapse(true)
 
@@ -115,7 +115,7 @@ const setCursorPosition = (customPosition: number, eol: boolean) => {
   selection?.addRange(selectedRange)
 
   // focus the cursor
-  editableInput.value.focus()
+  editableInputRef.value.focus()
 }
 
 
@@ -124,19 +124,19 @@ const setCursorPosition = (customPosition: number, eol: boolean) => {
  * get cursor position
  */
 const getCursorPosition = () => {
-  if (typeof window === 'undefined' || !editableInput.value) {
+  if (typeof window === 'undefined' || !editableInputRef.value) {
     return 0
   }
   const selection = window.getSelection()
   if (!selection) {
     return 0
   }
-  const currentArray = editableInput.value.innerText.split('')
+  const currentArray = editableInputRef.value.innerText.split('')
 
   const range = selection.rangeCount > 0 ? selection?.getRangeAt(0) : null
   if (range) {
     const clonedRange = range?.cloneRange()
-    clonedRange?.selectNodeContents(editableInput.value)
+    clonedRange?.selectNodeContents(editableInputRef.value)
     clonedRange?.setEnd(range.endContainer, range?.endOffset)
 
     // here we have a string but no \n -s , so we would need to count number of \n  in this fragment
@@ -202,8 +202,8 @@ const handleInput = (e: Event) => {
           // inject indentations
 
           cText = cText.substring(0, cursorPosition.value) + Array(paddings + 1).join(' ') + cText.substring(cursorPosition.value)
-          if (editableInput.value) {
-            editableInput.value.innerText = cText
+          if (editableInputRef.value) {
+            editableInputRef.value.innerText = cText
           }
           // force presented code to the resulting one
           presentedCode.value = cText
@@ -242,15 +242,15 @@ const handleFocusOut = (e: Event) => {
   const cText = (e.target as HTMLElement).innerText
   let resText = formatCode(cText, props.lang)
   editableCode.value = resText
-  if (editableInput.value) {
-    editableInput.value.innerText = editableCode.value
+  if (editableInputRef.value) {
+    editableInputRef.value.innerText = editableCode.value
   }
   presentedCode.value = resText
   emit('request-body-changed', resText)
 }
 
 
-watch(() => ({ code: props.code, lang: props.lang, editableInput: editableInput.value }),
+watch(() => ({ code: props.code, lang: props.lang, editableInput: editableInputRef.value }),
   ({ code: newCode, lang: newLang, editableInput: newEditableInput }) => {
     if (newCode !== newEditableInput?.innerText) {
       editableCode.value = formatCode(newCode, newLang)

src/components/common/HeadlessPopover.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    ref="popoverWrapperRef"
+    ref="popoverWrapper"
     class="popover"
     data-testid="popover"
     v-bind="sanitizedAttrs"
   >
     <div
-      ref="triggerWrapperRef"
+      ref="triggerWrapper"
       class="popover-trigger-wrapper"
     >
       <slot />
@@ -38,11 +38,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, computed, watch, useAttrs } from 'vue'
+import { ref, onMounted, computed, watch, useAttrs, useTemplateRef } from 'vue'
 import type { PropType } from 'vue'
 import { useFloating, autoUpdate, offset, flip } from '@floating-ui/vue'
 import type { Placement } from '@floating-ui/vue'
 import { PopoverPlacementVariants } from '@/types'
+import { useEventListener } from '@vueuse/core'
 
 defineOptions({
   inheritAttrs: false,
@@ -109,8 +110,8 @@ const sanitizedAttrs = computed(() => {
   return strippedAttrs
 })
 
-const popoverWrapperRef = ref<HTMLElement | null>(null)
-const triggerWrapperRef = ref<HTMLElement | null>(null)
+const popoverWrapperRef = useTemplateRef('popoverWrapper')
+const triggerWrapperRef = useTemplateRef('triggerWrapper')
 const popoverRef = ref<HTMLElement | null>(null)
 const isVisible = ref<boolean>(false)
 
@@ -186,40 +187,16 @@ onMounted(() => {
   if (document) {
     // handle various click events to determine how to handle the click event in a generic clickHandler function
     // we don't set any other click event listeners on purpose to avoid conflict of event listeners
-    document?.addEventListener('click', clickHandler)
+    useEventListener(document, 'click', clickHandler)
 
     if (popoverTrigger.value && props.openOnMouseover) {
-      popoverTrigger.value.addEventListener('mouseenter', showPopover)
-      popoverTrigger.value.addEventListener('focus', showPopover)
-      popoverTrigger.value.addEventListener('mouseleave', hidePopover)
-      popoverTrigger.value.addEventListener('blur', hidePopover)
+      useEventListener(popoverTrigger.value, ['mouseenter', 'focus'], showPopover)
+      useEventListener(popoverTrigger.value, ['mouseleave', 'blur'], hidePopover)
     }
 
     if (popoverRef.value && props.openOnMouseover) {
-      popoverRef.value.addEventListener('mouseenter', showPopover)
-      popoverRef.value.addEventListener('focusin', showPopover)
-      popoverRef.value.addEventListener('mouseleave', hidePopover)
-      popoverRef.value.addEventListener('focusout', hidePopover)
-    }
-  }
-})
-
-onBeforeUnmount(() => {
-  if (document) {
-    document?.removeEventListener('click', clickHandler)
-
-    if (popoverTrigger.value && props.openOnMouseover) {
-      popoverTrigger.value.removeEventListener('mouseenter', showPopover)
-      popoverTrigger.value.removeEventListener('focus', showPopover)
-      popoverTrigger.value.removeEventListener('mouseleave', hidePopover)
-      popoverTrigger.value.removeEventListener('blur', hidePopover)
-    }
-
-    if (popoverRef.value && props.openOnMouseover) {
-      popoverRef.value.removeEventListener('mouseenter', showPopover)
-      popoverRef.value.removeEventListener('focusin', showPopover)
-      popoverRef.value.removeEventListener('mouseleave', hidePopover)
-      popoverRef.value.removeEventListener('focusout', hidePopover)
+      useEventListener(popoverRef.value, ['mouseenter', 'focusin'], showPopover)
+      useEventListener(popoverRef.value, ['mouseleave', 'focusout'], hidePopover)
     }
   }
 })

src/components/common/SelectDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <Popover
-    ref="selectPopoverRef"
+    ref="selectPopover"
     :aria-activedescendant="selectedItem ? `${selectedItem.key ? selectedItem.key : selectedItem.value}-item` : undefined"
     :aria-labelledby="attrs.id ? String(attrs.id) : undefined"
     class="select-dropdown"
@@ -77,14 +77,13 @@ defineOptions({
   inheritAttrs: false,
 })
 
-import { computed, useAttrs, watch } from 'vue'
+import { computed, useAttrs, useTemplateRef, watch } from 'vue'
 import type { PropType } from 'vue'
 import Popover from './HeadlessPopover.vue'
 import { ChevronDownIcon } from '@kong/icons'
 import type { SelectItem } from '@/types'
 import type { Placement } from '@floating-ui/vue'
 import { PopoverPlacementVariants } from '@/types'
-import { ref } from 'vue'
 
 const props = defineProps({
   triggerButton: {
@@ -129,7 +128,7 @@ const sanitizedAttrs = computed(() => {
 
 const selectValue = defineModel<string>({ default: '' })
 
-const selectPopoverRef = ref<InstanceType<typeof Popover> | null>(null)
+const selectPopoverRef = useTemplateRef('selectPopover')
 
 const selectItem = (value: string) => {
   selectValue.value = value

src/components/common/SlideOut.vue

@@ -14,7 +14,6 @@
       <Transition name="spec-renderer-slide-in">
         <div
           v-show="visible"
-          ref="slideoutContainerRef"
           class="slideout-container"
           data-testid="slideout-container"
         >
@@ -48,7 +47,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onUnmounted, watch, useAttrs } from 'vue'
+import { onUnmounted, watch, useAttrs } from 'vue'
 import { CloseIcon } from '@kong/icons'
 
 defineOptions({
@@ -80,8 +79,6 @@ const emit = defineEmits<{
   (e: 'close'): void
 }>()
 
-const slideoutContainerRef = ref<HTMLElement | null>(null)
-
 const handleClose = (e: any): void => {
   // close on escape key
   if ((props.visible && e.keyCode === 27)) {

src/components/common/ToggleSwitch.vue

@@ -5,7 +5,7 @@
     v-bind="sanitizedAttrs"
   >
     <input
-      ref="switchInputRef"
+      ref="switchInput"
       hidden
       tabindex="-1"
       type="checkbox"
@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, useAttrs, computed } from 'vue'
+import { useAttrs, computed, useTemplateRef } from 'vue'
 import InputLabel from '@/components/common/InputLabel.vue'
 
 defineOptions({
@@ -97,7 +97,7 @@ const switchControlElAttrs = computed((): Record<string, any> => {
 
 const toggleValue = defineModel<boolean>({ required: true })
 
-const switchInputRef = ref<HTMLInputElement | null>(null)
+const switchInputRef = useTemplateRef('switchInput')
 
 const propagateInputEvent = (event: Event): void => {
   if (props.disabled) {

src/components/spec-document/SpecDocument.vue

@@ -20,7 +20,7 @@
   </div>
   <div
     v-else-if="serviceNode"
-    ref="wrapperRef"
+    ref="wrapper"
     class="nodes-wrapper"
     :class="{ 'reset-margin': markdownStyles }"
   >
@@ -52,7 +52,7 @@
 </template>
 
 <script setup lang="ts">
-import { watch, ref, provide, computed, nextTick, onBeforeMount } from 'vue'
+import { watch, ref, provide, computed, nextTick, onBeforeMount, useTemplateRef } from 'vue'
 import { useMagicKeys, useWindowScroll, useWindowSize, useElementSize, useScroll, until, whenever } from '@vueuse/core'
 import composables from '@/composables'
 import type { PropType, ComputedRef } from 'vue'
@@ -226,7 +226,7 @@ const toRenderer = ref<Array<'true' | 'false' | 'forced'>>([])
 const lastY = ref<number>()
 const processScrolling = ref<boolean>(false)
 const lastPath = ref<string>()
-const wrapperRef = ref<HTMLElement | null>(null)
+const wrapperRef = useTemplateRef('wrapper')
 const renderPlain = ref<boolean>(false)
 
 const specDocument = computed((): ServiceNode => {