feat: block scroll on mount

Author: codebender828

packages/c-focus-lock/src/c-focus-lock.ts

@@ -14,19 +14,9 @@
  * and my suspicion is that it is happening inside the library
  */
 
-import {
-  h,
-  defineComponent,
-  PropType,
-  computed,
-  cloneVNode,
-  VNode,
-  watch,
-} from 'vue'
-import { chakra } from '@chakra-ui/vue-system'
-import { focus, FocusableElement, __DEV__ } from '@chakra-ui/utils'
+import { defineComponent, PropType, computed, cloneVNode, VNode } from 'vue'
+import { focus, FocusableElement, warn, __DEV__ } from '@chakra-ui/utils'
 import { UseFocusLockOptions, useFocusLock } from './use-focus-lock'
-import { useRef } from '@chakra-ui/vue-utils'
 import { FocusTarget } from 'focus-trap'
 
 type RefProp = () => HTMLElement | string | object | undefined
@@ -122,9 +112,12 @@ export const CFocusLock = defineComponent({
       const [firstChild] = slots.default?.({}) as VNode[]
 
       if (!firstChild) {
-        console.warn(
-          `[chakra-ui:focus-lock]: Focus lock component expects at least and only one child element.`
-        )
+        warn([
+          {
+            condition: __DEV__,
+            message: `[chakra-ui:focus-lock]: Focus lock component expects at least and only one child element.`,
+          },
+        ])
         return
       }
 

packages/c-focus-lock/tests/c-focus-lock.test.ts

@@ -24,17 +24,15 @@ afterEach(() => {
 const renderComponent = (props?: any) => {
   const base = {
     components: {
-      CPortal,
+      // CPortal,
       CFocusLock,
     },
     template: `
-      <c-portal>
         <div :ref="lock" data-testid="focus-lock-container">
           <input data-testid="input" />
           <input />
           <input />
         </div>
-      </c-portal>
     `,
     setup() {
       const { lock } = useFocusLock()

packages/c-modal/examples/simple-modal.vue

@@ -9,7 +9,7 @@
     <c-button color-scheme="blue" @click="isOpen = true">Open modal</c-button>
     <c-button ref="finalFocus" ml="3">Other button</c-button>
     <!-- eslint-disable-next-line -->
-    <c-modal v-model:is-open="isOpen" motion-preset="slideInRight" :initial-focus-ref="'#initialFocus'" :final-focus-ref="() => $refs.finalFocus">
+    <c-modal v-model="isOpen" :initial-focus-ref="'#initialFocus'" :blockScrollOnMount="false" :final-focus-ref="() => $refs.finalFocus">
       <c-modal-overlay />
       <c-modal-content>
         <c-modal-header>Modal header</c-modal-header>

packages/c-modal/src/c-modal.ts

@@ -67,7 +67,7 @@ export interface CModalProps extends UnwrapRef<UseModalOptions>, ModalOptions {
    *
    * @default true
    */
-  isOpen: boolean
+  modelValue: boolean
   /**
    * If `false`, focus lock will be disabled completely.
    *
@@ -151,8 +151,8 @@ export { ModalContextProvider, useModalContext }
 export const CModal = defineComponent({
   name: 'CModal',
   props: {
-    isOpen: {
-      type: Boolean as PropType<CModalProps['isOpen']>,
+    modelValue: {
+      type: Boolean as PropType<CModalProps['modelValue']>,
       default: false,
     },
     id: String as PropType<CModalProps['id']>,
@@ -203,10 +203,10 @@ export const CModal = defineComponent({
       default: 'slideInBottom',
     },
   },
-  emits: ['update:is-open', 'escape', 'close'],
+  emits: ['update:modelValue', 'escape', 'close'],
   setup(props, { slots, attrs, emit }) {
     const closeModal = () => {
-      emit('update:is-open', false)
+      emit('update:modelValue', false)
     }
 
     const handleEscape = (event: KeyboardEvent) => {
@@ -234,7 +234,7 @@ export const CModal = defineComponent({
     return () =>
       h(CPortal, () => [
         h(CMotion, { type: 'fade' }, () => [
-          props.isOpen && h(chakra('span'), () => slots?.default?.()),
+          props.modelValue && h(chakra('span'), () => slots?.default?.()),
         ]),
       ])
   },
@@ -249,9 +249,12 @@ export const CModalContent = defineComponent({
   inheritAttrs: false,
   emits: ['click', 'mousedown', 'keydown'],
   setup(_, { attrs, slots, emit }) {
-    const { dialogContainerProps, dialogProps, isOpen, motionPreset } = unref(
-      useModalContext()
-    )
+    const {
+      dialogContainerProps,
+      dialogProps,
+      modelValue,
+      motionPreset,
+    } = unref(useModalContext())
     const styles = useStyles()
     const transitionId = 'modal-content'
 
@@ -264,7 +267,7 @@ export const CModalContent = defineComponent({
       })
     }
 
-    watch(isOpen, (newVal) => {
+    watch(modelValue, (newVal) => {
       if (!newVal) {
         leave(() => null)
       }
@@ -297,7 +300,7 @@ export const CModalContent = defineComponent({
         }),
         dialogContainerProps.value({ emit }),
         () => [
-          isOpen.value &&
+          modelValue.value &&
             withDirectives(
               h(
                 chakra('section', {

packages/c-modal/src/use-modal.ts

@@ -1,7 +1,6 @@
 import {
   computed,
   getCurrentInstance,
-  nextTick,
   onBeforeMount,
   onBeforeUnmount,
   ref,
@@ -23,7 +22,7 @@ export interface UseModalOptions {
   /**
    * If `true`, the modal will be open.
    */
-  isOpen: Ref<boolean>
+  modelValue: Ref<boolean>
   /**
    * The `id` of the modal
    */
@@ -33,6 +32,11 @@ export interface UseModalOptions {
    * @default true
    */
   closeOnOverlayClick?: Ref<boolean>
+  /**
+   * If `true`, the body will not be scollable when mounted
+   * @default true
+   */
+  blockScrollOnMount?: Ref<boolean>
   /**
    * The initial element to be focused when the focus lock is opened
    */
@@ -75,13 +79,14 @@ export interface UseModalOptions {
 export function useModal(options: UseModalOptions) {
   const { handleEscape, closeModal } = options
   const {
-    isOpen,
+    modelValue,
     id,
     closeOnOverlayClick,
     closeOnEsc,
     initialFocusRef,
     finalFocusRef,
     useInert,
+    blockScrollOnMount,
   } = toRefs(options)
 
   const instance = getCurrentInstance()
@@ -137,7 +142,7 @@ export function useModal(options: UseModalOptions) {
     `chakra-modal--body`
   )
 
-  const { lastFocusedSelector } = useReturnFocusSelector(isOpen)
+  const { lastFocusedSelector } = useReturnFocusSelector(modelValue)
 
   const hasHeader = ref(false)
   const hasBody = ref(false)
@@ -188,7 +193,9 @@ export function useModal(options: UseModalOptions) {
     immediate: true,
   })
 
-  const { scrollLockRef } = useBodyScrollLock(isOpen)
+  const { scrollLockRef } = useBodyScrollLock(
+    blockScrollOnMount?.value ? modelValue : ref(false)
+  )
 
   /**
    * This watcher is being used to track
@@ -254,7 +261,7 @@ export function useModal(options: UseModalOptions) {
     () => ({ emit }) => ({
       ref: overlayRef as any,
       onClick: (event: MouseEvent) => {
-        instance?.emit('update:is-open', !isOpen.value)
+        instance?.emit('update:modelValue', !modelValue.value)
         instance?.emit('close')
         handleOverlayClick(event)
       },
@@ -272,11 +279,13 @@ export function useModal(options: UseModalOptions) {
    * `aria-hidden` attributes handling
    * @see useAriaHidden
    */
-  const shouldHide = computed(() => (isOpen.value && useInert?.value) || false)
+  const shouldHide = computed(
+    () => (modelValue.value && useInert?.value) || false
+  )
   useAriaHidden(dialogRefEl, shouldHide)
 
   return {
-    isOpen,
+    modelValue,
     headerId,
     bodyId,
     dialogRef,

packages/theme/src/foundations/breakpoints.ts

@@ -8,6 +8,7 @@ const breakpoints = createBreakpoints({
   md: '48em',
   lg: '62em',
   xl: '80em',
+  '2xl': '96em',
 })
 
 export default breakpoints