data-hs-overlay-keyboard is not working

[gkcsabado]

Setting the data-hs-overlay-keyboard to true doesn't prevent the Esc button to close the modal.

function QuoteForm() {
  const totalSteps = 8;
  const [currentStep, setCurrentStep] = useState(1);

  ...

  return (
    <>
      <div
        id="QuoteFormModal"
        className="hs-overlay hidden w-full h-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto pointer-events-none [--overlay-backdrop:static]"
        data-hs-overlay-keyboard="true"
      >
        <div className="hs-overlay-open:mt-0 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-10 opacity-0 transition-all w-full max-w-full fixed md:static bottom-0 md:hs-overlay-open:mt-10 md:mt-0 md:max-w-lg md:mx-auto">
          <div className="flex flex-col bg-white md:border rounded-t-xl md:rounded-b-xl pointer-events-auto md:shadow-sm">
            <div className="px-6 md:px-10">
              <ProgressBar
                currentStep={currentStep}
                totalSteps={totalSteps}
              />

              {renderStep()}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default QuoteForm;

[olegpix]

Setting the data-hs-overlay-keyboard to true doesn't prevent the Esc button to close the modal.

function QuoteForm() {
  const totalSteps = 8;
  const [currentStep, setCurrentStep] = useState(1);

  ...

  return (
    <>
      <div
        id="QuoteFormModal"
        className="hs-overlay hidden w-full h-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto pointer-events-none [--overlay-backdrop:static]"
        data-hs-overlay-keyboard="true"
      >
        <div className="hs-overlay-open:mt-0 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-10 opacity-0 transition-all w-full max-w-full fixed md:static bottom-0 md:hs-overlay-open:mt-10 md:mt-0 md:max-w-lg md:mx-auto">
          <div className="flex flex-col bg-white md:border rounded-t-xl md:rounded-b-xl pointer-events-auto md:shadow-sm">
            <div className="px-6 md:px-10">
              <ProgressBar
                currentStep={currentStep}
                totalSteps={totalSteps}
              />

              {renderStep()}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default QuoteForm;

Hi! Thanks for noticing! We will fix this in the next update

[jahaganiev]

Hey @gkcsabado - thanks for reporting the issue. We've just pushed the fixes in the v2.1.0 update. Thanks!