"FocusTrap: Element must have at least one focusable child." when the current UiDrawer item is programmaticaly set to be invisible

[tsrift]

Development Relevant Information:

• BalmUI version:
• Browser:
• Operating System:

Description:

I am using UiDrawer and inside I have UiNavItem for logout. When I click on a button to logout inside /logout page I want to hide this link item from the UiDrawer (isLoggedIn() function returns false) because there is no need to be present anymore. But the problem is that this Logout item is currently active and it will become invisible in the code (v-if="isLoggedIn()") so there will be no active item in the UiDrawer and I get error when I try to expand the UiDrawer:

Uncaught Error: FocusTrap: Element must have at least one focusable child.

Steps To Reproduce:

<ui-drawer v-model="data.openDrawer" type="modal">
	<ui-drawer-content>
		...
		<div v-if="isLoggedIn()">	
			<ui-list-divider></ui-list-divider>
			<ui-nav-item @click="navigate('logout')">
				<ui-item-first-content>
					<ui-icon>logout</ui-icon>
				</ui-item-first-content>
				<ui-item-text-content>Logout</ui-item-text-content>
			</ui-nav-item>
		</div>
	</ui-drawer-content>
</ui-drawer>