[GH #5800] Modal dialog does not open with DropdownMenu enabled

Tags: #<Tag:0x00007f8b2b19a5b0> #<Tag:0x00007f8b2b19a448>
#1

Hi,

I’m using handsontable in my asp mvc app.

I’m trying to open a modal dialog by clicking a cell of handsontable.
It works fine if dropdownMenu is disabled, however, it does not pop up if enabled.
Here is a demo: https://dotnetfiddle.net/HZgSDw

    var settings = {
        data: Handsontable.helper.createSpreadsheetData(3, 3),
        rowHeaders: true,
        colHeaders: columnHdrs,
        columns: myColumns,
/* WITH THIS OPTION ENABLED,  A POP UP DIALOG WILL NOT OPEN */
        //dropdownMenu: true,
    };

Is there any additional setting I should take care of?

Thank you in advance!

#2

Hey @mok

did you try to destroy and rebuild (set up again) the Handsontable when modal is closed?

#3

Thank you for your quick reply.
No, the Handsontable is not destroyed in this scenario.

#4

Can you check if doing

destroy()
then creating new instance

will solve the issue? What should be done after you show the modal (do you use any data from the table)?

#5

The tables appended below the original table disappeared after adding destroy() and recreating the table. However, that’s not my main problem.

I’m trying to display a modal as in the image below. It is going to display an editor view for corresponding row. It won’t have a table on it.

The difference between two demos below is just one line, whether dropdownMenu is enabled or not.
DropdownMenu disabled, modal popup successfully: https://dotnetfiddle.net/HZgSDw
DropdownMenu enabled, modal doesn’t popup: https://dotnetfiddle.net/UcBbxt

I wonder how to enable both dropdownMenu and modal at the same setting. Is there any z-index involved only when dropdownMenu is enabled?

Thank you for your advice!

#6

I will ask our developer to investigate this case.

#7

Hey @mok

I just got a review from our developer

In vanilla js is the same. I think that is because dropdownMenu register table click listener and inside this method call stopPropagation(event);. Without this modal isn’t blocking.

I’ll ask him if there’s anything else we can do to support both methods.

#8

Hello

Thank you for your investigation.
Would there be any side effect simply by not calling stopPropagation(event)? I’m looking forward to further update.

#9

Our developer opened an issue for this case at https://github.com/handsontable/handsontable/issues/5800

I will let you know as soon as we fi it.