Skip to content

Escape key closes modals inspite of closeOnPressEscape prop, only after build (!) #420

@pravdinalex

Description

@pravdinalex

Describe the bug

When we set closeOnPressEscape = false we expect modal not to be closed by escape key. It works like this in dev mode, but doesn't work after build!

<IModal :closeOnPressEscape="false" ... >...</IModal>

Problem, as I see it is in packages/inkline/src/controllers/OverlayController.ts: at onPressEscape() we check topOverlay.closeOnPressEscape, while this is ref in fact -> always true.

    onPressEscape() {
        const topOverlay = OverlayController.getTopOverlay();

        if (topOverlay && topOverlay.closeOnPressEscape) { // <- always true!
            topOverlay.hide();
        }
    }

In packages/inkline/src/components/IModal/IModal.vue we pass ref to closeOnPressEscape:

const closeOnPressEscape = toRef(props, 'closeOnPressEscape');
...
        onMounted(() => {
            OverlayController.register({
                name,
                elementRef: wrapperRef,
                closeOnPressEscape, // <- it's ref
                hide
            });
        });

So, onPressEscape should be fixed or to ... && topOverlay.closeOnPressEscape.value or with unref (like in open()).

PS: don't know why it fails only after build and works in dev mode.

To Reproduce
Steps to reproduce the behavior:

  1. Create new app as described at documentation (Vite case for example)
  2. Add button, modal, visible flag as described at IModal doc page
  3. Set :closeOnPressEscape="false" for modal
  4. Execute npm run dev: you see, it works ok and doesn't close at escape
  5. Execute npm run build, npm run preview - now it closes modal by escape inspite of closeOnPressEscape = false

Expected behavior
In both cases it shouldn't close modal by escape key

Screenshots
image
image

Environment

  • Version: =4.7.1
  • Framework: [Vite]
  • OS: [Windows]
  • Browser: [Chrome 126]
  • Language: [all]

Additional context
Add any other context about the problem here.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions