@saasmakers/ui 2.0.79 → 2.0.80

package/app/components/layout/LayoutBottomSheet.vue

@@ -19,6 +19,7 @@ const contentRef = ref<HTMLElement>()
 const panelRef = ref<HTMLElement>()
 const { release: onAfterLeave } = useDialog(visible, panelRef)
 const { isKeyboardOpen, keyboardInset } = useKeyboardInset()
+const skipLeaveSlide = ref(false)
 
 const drag = reactive({
   closing: false,
@@ -44,6 +45,19 @@ const panelStyle = computed(() => {
   }
 })
 
+function dismissKeyboard() {
+  if (!import.meta.client) {
+    return
+  }
+
+  const activeElement = document.activeElement
+
+  // Blur instead of Keyboard.hide() so focus is cleared too (incl. the warmup input).
+  if (activeElement instanceof HTMLElement && activeElement !== document.body) {
+    activeElement.blur()
+  }
+}
+
 function onBackdropClick() {
   if (props.closeOnBackdrop) {
     onClose()
@@ -84,6 +98,12 @@ function onHeaderPointerDown(event: PointerEvent) {
   handle.setPointerCapture(event.pointerId)
 }
 
+function onLeaveComplete() {
+  skipLeaveSlide.value = false
+
+  onAfterLeave()
+}
+
 function onPanelTransitionEnd(event: TransitionEvent) {
   if (event.propertyName !== 'transform' || !drag.closing) {
     return
@@ -168,6 +188,13 @@ function onPointerUp(event: PointerEvent) {
   handle.releasePointerCapture(event.pointerId)
 
   if (drag.offset >= closeThreshold.value) {
+    if (isKeyboardOpen.value) {
+      onClose()
+      resetDragState()
+
+      return
+    }
+
     drag.closing = true
 
     return
@@ -192,6 +219,10 @@ function resetPendingDrag() {
 
 watch(visible, (isVisible) => {
   if (!isVisible) {
+    // iOS hides the keyboard before a leave slide would finish.
+    skipLeaveSlide.value = isKeyboardOpen.value
+
+    dismissKeyboard()
     resetDragState()
   }
 })
@@ -209,13 +240,14 @@ watch(visible, (isVisible) => {
   <ClientOnly>
     <Teleport to="body">
       <Transition
+        :css="!skipLeaveSlide"
         enter-active-class="transition-transform duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
         enter-from-class="translate-y-full motion-reduce:translate-y-0"
         enter-to-class="translate-y-0"
         leave-active-class="transition-transform duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
         leave-from-class="translate-y-0"
         leave-to-class="translate-y-full motion-reduce:translate-y-0"
-        @after-leave="onAfterLeave"
+        @after-leave="onLeaveComplete"
       >
         <div
           v-if="visible"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.79",
+  "version": "2.0.80",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",