const tabsEl = document.querySelector('#tab_post');
const tabs = KTTabs.getInstance(tabsEl);
tabs.on('show', (detail) => {
detail.cancel = true;
console.log('show action canceled');
});

tabs.on('shown', () => {
console.log('shown event');
});


<div class="card">
<div class="flex justify-between items-center mb-5 p-7.5 pb-0">
<div class="flex items-center gap-3">
<div class="">
<img class="rounded-full size-[50px]" src="/media/avatars/300-1.png"/>
</div>
<div class="flex flex-col">
<a class="text-md font-semibold text-gray-900 hover:text-primary-active mb-1" href="#">
Jenny Klabber
</a>
<time class="text-sm font-medium text-gray-600">
2 days ago
</time>
</div>
</div>
<div class="menu" data-menu="true">
<div class="menu-item" data-menu-item-offset="0, 10px" data-menu-item-placement="bottom-end" data-menu-item-toggle="dropdown" data-menu-item-trigger="click|lg:click">
<button class="menu-toggle btn btn-sm btn-icon btn-light btn-clear">
<i class="ki-filled ki-dots-vertical">
</i>
</button>
<div class="menu-dropdown menu-default w-full max-w-[200px]" data-menu-dismiss="true">
<div class="menu-item">
<a class="menu-link" href="html/demo1/account/activity.html">
<span class="menu-icon">
<i class="ki-filled ki-cloud-change">
</i>
</span>
<span class="menu-title">
Activity
</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" data-modal-toggle="#share_profile_modal" href="#">
<span class="menu-icon">
<i class="ki-filled ki-share">
</i>
</span>
<span class="menu-title">
Share
</span>
</a>
</div>
<div class="menu-item" data-menu-item-offset="-15px, 0" data-menu-item-placement="right-start" data-menu-item-toggle="dropdown" data-menu-item-trigger="click|lg:hover">
<div class="menu-link">
<span class="menu-icon">
<i class="ki-filled ki-notification-status">
</i>
</span>
<span class="menu-title">
Notifications
</span>
<span class="menu-arrow">
<i class="ki-filled ki-right text-3xs">
</i>
</span>
</div>
<div class="menu-dropdown menu-default w-full max-w-[175px]">
<div class="menu-item">
<a class="menu-link" href="html/demo1/account/home/settings-sidebar.html">
<span class="menu-icon">
<i class="ki-filled ki-sms">
</i>
</span>
<span class="menu-title">
Email
</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="html/demo1/account/home/settings-sidebar.html">
<span class="menu-icon">
<i class="ki-filled ki-message-notify">
</i>
</span>
<span class="menu-title">
SMS
</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="html/demo1/account/home/settings-sidebar.html">
<span class="menu-icon">
<i class="ki-filled ki-notification-status">
</i>
</span>
<span class="menu-title">
Push
</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<a class="menu-link" data-modal-toggle="#report_user_modal" href="#">
<span class="menu-icon">
<i class="ki-filled ki-dislike">
</i>
</span>
<span class="menu-title">
Report
</span>
</a>
</div>
<div class="menu-separator">
</div>
<div class="menu-item">
<a class="menu-link" href="html/demo1/account/home/settings-enterprise.html">
<span class="menu-icon">
<i class="ki-filled ki-setting-3">
</i>
</span>
<span class="menu-title">
Settings
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<p class="mb-5 text-sm font-medium text-gray-600 leading-5.5 px-7.5">
I can hear your objections already. “But Dan, I have to blog for a
cardboard box manufacturing company.” I feel your pain, I really do.
</p>
<div>
<div class="flex items-center flex-wrap gap-2.5 border-gray-300 border-t border-b border-dashed py-1.5 mb-4 mx-7.5" data-tabs="true" id="tab_post">
<button class="group btn px-3 text-gray-700 hover:text-primary tab-active:bg-primary-light tab-active:border-primary-clarity tab-active:text-primary" data-tab-toggle="#post_2_comments">
<i class="ki-filled ki-message-text text-gray-500 group-hover:text-primary tab-active:text-primary">
</i>
2 Comments
</button>
<button class="group btn px-3 text-gray-700 hover:text-primary tab-active:bg-primary-light tab-active:border-primary-clarity tab-active:text-primary" data-tab-toggle="#post_2_likes">
<i class="ki-filled ki-heart text-gray-500 group-hover:text-primary tab-active:text-primary">
</i>
24 Likes
</button>
<button class="active group btn px-3 text-gray-700 hover:text-primary tab-active:bg-primary-light tab-active:border-primary-clarity tab-active:text-primary" data-tab-toggle="#post_2_saves">
<i class="ki-filled ki-archive-tick text-gray-500 group-hover:text-primary tab-active:text-primary">
</i>
16 Saves
</button>
</div>
<div class="hidden" id="post_2_comments">
<div class="grid gap-2 lg:gap-5 p-7.5 pt-0">
<div class="flex items-start gap-2.5">
<img alt="" class="rounded-full w-9 h-9 lg:w-[50px] lg:h-[50px] mt-1" src="/media/avatars/300-1.png"/>
<div class="grid gap-2.5 grow">
<div class="flex justify-between items-center">
<div class="flex items-center gap-1.5">
<a class="text-md font-semibold text-gray-900 hover:text-primary-active" href="#">
Mr. Anderson
</a>
<span class="text-sm font-medium text-gray-600">
1 Day ago
</span>
</div>
<div class="justify-center">
<a class="btn btn-link" href="">
Reply
</a>
</div>
</div>
<p class="text-sm font-medium text-gray-700 heading-5.5">
Long before you sit dow to put digital pen to paper you need
to make sure you have to sit down and write. I’ll show you how to write
a great blog post in five simple steps that people will actually want to read. Ready?
</p>
</div>
</div>
<div class="flex items-start gap-2.5">
<img alt="" class="rounded-full w-9 h-9 lg:w-[50px] lg:h-[50px] mt-1" src="/media/avatars/300-15.png"/>
<div class="grid gap-2.5 grow">
<div class="flex justify-between items-center">
<div class="flex items-center gap-1.5">
<a class="text-md font-semibold text-gray-900 hover:text-primary-active" href="#">
Mrs. Anderson
</a>
<span class="text-sm font-medium text-gray-600">
1 Day ago
</span>
</div>
<div class="justify-center">
<a class="btn btn-link" href="">
Reply
</a>
</div>
</div>
<p class="text-sm font-medium text-gray-700 heading-5.5">
Long before you sit dow to put digital pen to paper.
</p>
</div>
</div>
<div class="flex items-center gap-2.5">
<img alt="" class="rounded-full size-10 shrink-0" src="/media/avatars/300-3.png"/>
<div class="input input-lg">
<input placeholder="your comment.." type="text" value=""/>
<button class="btn btn-icon btn-sm">
<i class="ki-filled ki-picture">
</i>
</button>
</div>
</div>
</div>
</div>
<div class="hidden" id="post_2_likes">
<div class="flex flex-col gap-2 lg:gap-5 pt-3.5 px-7.5 mb-5">
<div class="flex items-center flex-wrap gap-2">
<div class="flex items-center grow gap-2.5">
<img alt="" class="rounded-full size-10 shrink-0" src="/media/avatars/300-14.png"/>
<div class="flex flex-col">
<a class="text-md font-semibold text-gray-900 hover:text-primary-active mb-px" href="#">
Adam Wilson
</a>
<span class="text-2sm font-medium text-gray-500">
2 mutual subscribers
</span>
</div>
</div>
<a class="btn btn-sm btn-primary">
<i class="ki-filled ki-people">
</i>
Connect
</a>
</div>
<div class="flex items-center flex-wrap gap-2">
<div class="flex items-center grow gap-2.5">
<img alt="" class="rounded-full size-10 shrink-0" src="/media/avatars/300-7.png"/>
<div class="flex flex-col">
<a class="text-md font-semibold text-gray-900 hover:text-primary-active mb-px" href="#">
Renee Branson
</a>
<span class="text-2sm font-medium text-gray-500">
6 mutual subscribers
</span>
</div>
</div>
<a class="btn btn-light btn-sm">
<i class="ki-filled ki-check-circle">
</i>
Connected
</a>
</div>
<div class="flex items-center flex-wrap gap-2">
<div class="flex items-center grow gap-2.5">
<img alt="" class="rounded-full size-10 shrink-0" src="/media/avatars/300-32.png"/>
<div class="flex flex-col">
<a class="text-md font-semibold text-gray-900 hover:text-primary-active mb-px" href="#">
Jonathan Taylor
</a>
<span class="text-2sm font-medium text-gray-500">
13 mutual subscribers
</span>
</div>
</div>
<a class="btn btn-sm btn-primary">
<i class="ki-filled ki-people">
</i>
Connect
</a>
</div>
<div class="flex items-center flex-wrap gap-2">
<div class="flex items-center grow gap-2.5">
<img alt="" class="rounded-full size-10 shrink-0" src="/media/avatars/300-15.png"/>
<div class="flex flex-col">
<a class="text-md font-semibold text-gray-900 hover:text-primary-active mb-px" href="#">
Lilia Mattox
</a>
<span class="text-2sm font-medium text-gray-500">
4 mutual subscribers
</span>
</div>
</div>
<a class="btn btn-light btn-sm">
<i class="ki-filled ki-check-circle">
</i>
Connected
</a>
</div>
<div class="flex items-center flex-wrap gap-2">
<div class="flex items-center grow gap-2.5">
<img alt="" class="rounded-full size-10 shrink-0" src="/media/avatars/300-25.png"/>
<div class="flex flex-col">
<a class="text-md font-semibold text-gray-900 hover:text-primary-active mb-px" href="#">
Neil Roberts
</a>
<span class="text-2sm font-medium text-gray-500">
23 mutual subscribers
</span>
</div>
</div>
<a class="btn btn-light btn-sm">
<i class="ki-filled ki-check-circle">
</i>
Connected
</a>
</div>
</div>
<div class="card-footer justify-center">
<a class="btn btn-link" href="">
Show more Likes
</a>
</div>
</div>
<div id="post_2_saves">

<div class="text-center p-7.5 pt-5">
<div class="bg-center bg-no-repeat bg-cover post-saves-bg">
</div>
<div class="text-xl font-medium text-gray-900 text-center my-2">
Access Restricted for this Option
</div>
<span class="text-sm font-medium text-gray-500 block mb-7.5">
The user may not have the necessary privileges or permissions
<br/>
to access this option in this page
</span>
<div class="flex justify-center">
<button class="btn btn-light">
Request Access
</button>
</div>
</div>
</div>

</div>
</div>


Uncaught (in promise) TypeError: Cannot read properties of null (reading 'on')
at DetailView.vue:19:10
at chunk-2LTNOSJU.js?v=4e70be8a:3272:40
at callWithErrorHandling (chunk-2LTNOSJU.js?v=4e70be8a:1663:19)
at callWithAsyncErrorHandling (chunk-2LTNOSJU.js?v=4e70be8a:1670:17)
at hook.__weh.hook.__weh (chunk-2LTNOSJU.js?v=4e70be8a:3252:19)
at flushPostFlushCbs (chunk-2LTNOSJU.js?v=4e70be8a:1846:32)
at flushJobs (chunk-2LTNOSJU.js?v=4e70be8a:1882:5)