Merge pull request #646 from code16/fix-entity-list-badge-tooltip

Fix tooltip opens even when no badge is present

Author: aguingand

resources/js/entity-list/EntityList.ts

@@ -148,13 +148,17 @@ export class EntityList implements EntityListData {
         );
     }
 
+    instanceHasBadge(instance: EntityListInstance, field: EntityListFieldData): boolean {
+        return (
+            instance[field.key] === true
+            || typeof instance[field.key] === 'number'
+            || typeof instance[field.key] === 'string' && instance[field.key].length > 0
+        );
+    }
+
     fieldShouldBeVisible(field: EntityListFieldData, showEntityState: boolean): boolean {
         if(field.type === 'badge') {
-            return this.data.some(item =>
-                item[field.key] === true
-                || typeof item[field.key] === 'number'
-                || typeof item[field.key] === 'string' && item[field.key].length > 0
-            );
+            return this.data.some(item => this.instanceHasBadge(item, field));
         }
 
         if(field.type === 'state') {

resources/js/entity-list/components/EntityList.vue

@@ -756,28 +756,30 @@
                                                             </DropdownMenu>
                                                         </template>
                                                         <template v-else-if="field.type === 'badge'">
-                                                            <TooltipProvider>
-                                                                <Tooltip :disabled="!field.tooltip" :delay-duration="0">
-                                                                    <TooltipTrigger as-child>
-                                                                        <div :class="field.tooltip ? 'relative z-2' : ''">
-                                                                            <template v-if="field.tooltip">
-                                                                                <div class="absolute -inset-2"></div>
-                                                                            </template>
-                                                                            <template v-if="item[field.key] === true">
-                                                                                <div class="size-2.5 bg-primary rounded-full"></div>
-                                                                            </template>
-                                                                            <template v-else-if="typeof item[field.key] === 'number' || (typeof item[field.key] === 'string' && item[field.key].length)">
-                                                                                <Badge class="px-1.5 justify-center min-w-5.5">
-                                                                                    {{ item[field.key] }}
-                                                                                </Badge>
-                                                                            </template>
-                                                                        </div>
-                                                                    </TooltipTrigger>
-                                                                    <TooltipContent :side-offset="10">
-                                                                        <div v-html="field.tooltip"></div>
-                                                                    </TooltipContent>
-                                                                </Tooltip>
-                                                            </TooltipProvider>
+                                                            <template v-if="entityList.instanceHasBadge(item, field)">
+                                                                <TooltipProvider>
+                                                                    <Tooltip :disabled="!field.tooltip" :delay-duration="0">
+                                                                        <TooltipTrigger as-child>
+                                                                            <div :class="field.tooltip ? 'relative z-2' : ''">
+                                                                                <template v-if="field.tooltip">
+                                                                                    <div class="absolute -inset-2"></div>
+                                                                                </template>
+                                                                                <template v-if="item[field.key] === true">
+                                                                                    <div class="size-2.5 bg-primary rounded-full"></div>
+                                                                                </template>
+                                                                                <template v-else>
+                                                                                    <Badge class="px-1.5 justify-center min-w-5.5">
+                                                                                        {{ item[field.key] }}
+                                                                                    </Badge>
+                                                                                </template>
+                                                                            </div>
+                                                                        </TooltipTrigger>
+                                                                        <TooltipContent :side-offset="10">
+                                                                            <div v-html="field.tooltip"></div>
+                                                                        </TooltipContent>
+                                                                    </Tooltip>
+                                                                </TooltipProvider>
+                                                            </template>
                                                         </template>
                                                         <template v-else>
                                                             <template v-if="field.html && typeof item[field.key] === 'string'">