refactor: fixed useTemplateRef and @touchstart related warnings

Author: mtorromeo

apps/docs/src/stories/Components/Tooltip.story.vue

@@ -96,7 +96,7 @@ import { reactive, ref, type Ref, onMounted, useTemplateRef } from 'vue';
 import { PfButton } from '@vue-patternfly/core';
 import type { Placement } from '@vue-patternfly/core/helpers/FloatingUi.vue';
 
-const buttonRef = useTemplateRef('buttonRef');
+const button = useTemplateRef('buttonRef');
 const trigger = reactive(['mouseenter', 'focus']);
 const leftAligned = ref(false);
 const flip = ref(true);
@@ -107,8 +107,8 @@ const exitDelay = ref(0);
 const distance = ref(15);
 
 onMounted(() => {
-  if (buttonRef.value?.el instanceof HTMLElement) {
-    buttonRef.value.el.scrollIntoView({
+  if (button.value?.el instanceof HTMLElement) {
+    button.value.el.scrollIntoView({
       behavior: 'instant',
       block: 'center',
       inline: 'center',

packages/core/src/components/Alert/Alert.vue

@@ -2,7 +2,7 @@
   <div
     v-if="!dismissed"
     v-bind="ouiaProps"
-    ref="el"
+    ref="elRef"
     :class="[
       styles.alert,
       styles.modifiers[variant], {
@@ -39,7 +39,7 @@
     <component :is="tooltipVisible ? PfTooltip : PassThrough" :position="tooltipPosition">
       <component
         :is="component"
-        ref="titleRef"
+        ref="title"
         :class="[styles.alertTitle, {
           [styles.modifiers.truncate]: truncateTitle,
         }]"
@@ -149,7 +149,7 @@ defineSlots<{
   'action-links'?: (props?: Record<never, never>) => any;
 }>();
 
-const titleRef = useTemplateRef<HTMLElement | ComponentPublicInstance>('titleRef');
+const titleRef = useTemplateRef<HTMLElement | ComponentPublicInstance>('title');
 const { width, height } = useElementSize(titleRef);
 const tooltipVisible = ref(false);
 let timer: number | undefined = undefined;
@@ -158,7 +158,7 @@ const isMouseOver = ref(false);
 const timedOut = ref(false);
 const timedOutAnimation = ref(true);
 const containsFocus = ref(false);
-const el = useTemplateRef('el');
+const el = useTemplateRef('elRef');
 
 const managedExpanded = useManagedProp('expanded', false);
 const variantLabel = computed(() => `${props.variant.charAt(0).toUpperCase()}${props.variant.slice(1)} alert:`);

packages/core/src/components/Button.vue

@@ -9,7 +9,7 @@
     <component
       v-bind="{...ouiaProps, ...$attrs}"
       :is="buttonComponent"
-      ref="el"
+      ref="elRef"
       :type="buttonComponent === 'button' ? type : null"
       :disabled="effectiveDisabled"
       :aria-disabled="effectiveDisabled || ariaDisabled"
@@ -138,7 +138,7 @@ defineSlots<{
   badge?: (props?: Record<never, never>) => any;
 }>();
 
-const el = useTemplateRef<HTMLElement | ComponentPublicInstance>('el');
+const el = useTemplateRef<HTMLElement | ComponentPublicInstance>('elRef');
 const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe, variant: props.variant});
 
 const buttonComponent = computed(() => {

packages/core/src/components/Checkbox.vue

@@ -24,7 +24,7 @@
 
       <input
         :id="validId"
-        ref="input"
+        ref="inputRef"
         v-bind="$attrs"
         type="checkbox"
         :class="styles.checkInput"
@@ -96,7 +96,7 @@ defineSlots<{
 }>();
 
 useChildrenTracker(FormInputsKey, getCurrentInstance()?.proxy);
-const input = useTemplateRef('input');
+const input = useTemplateRef('inputRef');
 const wrapWithLabel = computed(() => (props.labelWrapped && !props.component) || props.component === 'label');
 const validId = computed(() => props.id || getUniqueId());
 

packages/core/src/components/ChipGroup/Chip.vue

@@ -34,7 +34,7 @@
       :type="component === 'button' ? 'button' : undefined"
     >
       <span :class="styles.chipContent">
-        <span :id="effectiveId" ref="textRef" :class="styles.chipText">
+        <span :id="effectiveId" ref="text" :class="styles.chipText">
           <slot />
         </span>
         <slot name="badge" />
@@ -100,7 +100,7 @@ defineSlots<{
   badge?: (props?: Record<never, never>) => any;
 }>();
 
-const textRef = useTemplateRef('textRef');
+const textRef = useTemplateRef('text');
 const textOverflowing = useElementOverflow(textRef);
 const effectiveId = computed(() => props.id ?? getUniqueId());
 </script>

packages/core/src/components/ChipGroup/ChipGroup.vue

@@ -13,7 +13,7 @@
           {{ category }}
         </template>
 
-        <span ref="labelRef" :class="styles.chipGroupLabel">
+        <span ref="label" :class="styles.chipGroupLabel">
           {{ category }}
         </span>
       </pf-tooltip>
@@ -84,7 +84,7 @@ const slots = defineSlots<{
   default?: (props?: Record<never, never>) => any;
 }>();
 
-const labelRef = useTemplateRef('labelRef');
+const labelRef = useTemplateRef('label');
 const labelOverflowing = useElementOverflow(labelRef);
 const open = ref(props.defaultOpen);
 

packages/core/src/components/DescriptionList/DescriptionListTermHelpTextButton.vue

@@ -30,17 +30,17 @@ defineSlots<{
   default?: (props?: Record<never, never>) => any;
 }>();
 
-const helpTextRef = useTemplateRef('helpTextRef');
+const helpText = useTemplateRef('helpTextRef');
 
 function handleKeys(event: KeyboardEvent) {
-  if (!helpTextRef.value || helpTextRef.value !== (event.target as HTMLElement)) {
+  if (!helpText.value || helpText.value !== (event.target as HTMLElement)) {
     return;
   }
 
   const key = event.key;
   if (key === 'Enter' || key === ' ') {
     event.preventDefault();
-    helpTextRef.value.click();
+    helpText.value.click();
   }
 }
 </script>

packages/core/src/components/Drawer/Drawer.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-bind="ouiaProps"
-    ref="el"
+    ref="elRef"
     :class="[styles.drawer, {
       [styles.modifiers.expanded]: expandedClass,
       [styles.modifiers.inline]: inline,
@@ -50,7 +50,7 @@ defineSlots<{
   default?: (props?: Record<never, never>) => any;
 }>();
 
-const el = useTemplateRef('el');
+const el = useTemplateRef('elRef');
 const display = ref(props.static || props.expanded);
 const expandedClass = ref(props.expanded);
 const isOpen = computed(() => props.static || props.expanded);

packages/core/src/components/Drawer/DrawerContent.vue

@@ -1,7 +1,7 @@
 <template>
   <pf-drawer-main v-bind="ouiaProps">
     <auto-wrap
-      ref="el"
+      ref="elRef"
       force
       component="div"
       :exclude="PfDrawerPanelContent"
@@ -51,6 +51,6 @@ defineSlots<{
   content?: (props?: Record<never, never>) => any;
 }>();
 
-const el = useTemplateRef('el');
+const el = useTemplateRef('elRef');
 provide(DrawerContentRefKey, el);
 </script>

packages/core/src/components/Drawer/DrawerPanelContent.vue

@@ -2,7 +2,7 @@
   <div
     v-bind="ouiaProps"
     :id="panelId"
-    ref="panel"
+    ref="panelRef"
     :class="[styles.drawerPanel, {
       [styles.modifiers.resizable]: resizable,
       [styles.modifiers.noBorder]: noBorder,
@@ -104,7 +104,7 @@ defineSlots<{
   default?: (props?: Record<never, never>) => any;
 }>();
 
-const panel = useTemplateRef('panel');
+const panel = useTemplateRef('panelRef');
 const panelId = computed(() => props.id || getUniqueId('pf-drawer-panel-'));
 
 const drawerProvide = inject(DrawerKey);
@@ -115,7 +115,7 @@ if (!drawerProvide) {
 
 const { el: drawerRef, position, expanded, display, inline } = drawerProvide;
 const drawerContentRef = inject(DrawerContentRefKey);
-const splitterRef = useTemplateRef('splitterRef');
+const splitter = useTemplateRef('splitterRef');
 
 let isResizing: boolean | null = null;
 const panelSize: Ref<number | undefined> = ref();
@@ -130,7 +130,7 @@ function calcValueNow() {
   const drawerContentEl = resolveOverridableComponent(drawerContentRef?.value);
 
   const paR = panel.value?.getBoundingClientRect() ?? { left: 0, right: 0 };
-  const spR = splitterRef.value?.getBoundingClientRect() ?? { left: 0, right: 0, top: 0, bottom: 0 };
+  const spR = splitter.value?.getBoundingClientRect() ?? { left: 0, right: 0, top: 0, bottom: 0 };
   const drR = drawerRef.value?.getBoundingClientRect() ?? { left: 0, right: 0 };
   const dCR = drawerContentEl?.getBoundingClientRect() ?? { left: 0, right: 0, top: 0, bottom: 0 };