Как решить проблему с появлением пустого пространства под drawer из shadcn?

Question

[Flawles7]

есть компонент корзины, в нем поля ввода, при нажатии на поле ввода, появляется клавиатура и создает пустое пространство, при закрытии пустое пространство остается, решения с динамическим изменением высоты или перерендером компонента не подходят т.к вызывает нежелательные дерганья и т.п

сталкивались ли вы с такой проблемой и есть ли какой то способ ее решить не прибегая к костылям

'use client';

import { useEffect, useState } from 'react';
import { useCartMobile } from './store/store';
import { useCartSync } from '@/shared/lib/cart';
import { goToCartMetrik } from '@/shared/lib/metriks/go-to-cart-metrik';
import { Cart } from '@/widgets/cart';
import { Drawer, DrawerContent } from '@/shared/components/drawer';

const CartMobile = () => {
  const { isOpen, setOpen } = useCartMobile();

  const cartSync = useCartSync();

  useEffect(() => {
    if (isOpen) {
      goToCartMetrik();
      void cartSync.syncCart();
    }
  }, [isOpen, cartSync]);

  return (
    <Drawer open={isOpen} onOpenChange={setOpen}>
      <DrawerContent className='fixed bottom-0 left-0 right-0 h-[85%] rounded-t-3xl bg-cartBg outline-none lg:h-[320px]'>
        <div className='flex-1 overflow-y-auto rounded-t-3xl'>
          <Cart />
        </div>
      </DrawerContent>
    </Drawer>
  );
};

export default CartMobile;

Comments

[Flawles7]

сайт рабочий можно зайти посмотреть с телефона, достаточно зайти в корзину и нажать на поле ввода https://yftanma.front0.sellkit.ru

Answer 1

[Flawles7]

если вдруг у кого-то появилась такая проблема, вот решение,

https://github.com/shadcn-ui/ui/issues/2831#issuec...

нашел в обсуждении по это проблеме

нужно добавить параметр в компонент Drawer repositionInputs={false}