Parent component now sets the keys used to close the modal #757

gtiersma · 2022-03-03T17:15:23Z

The parent component provides the keysToClose prop with an array of strings specifying which keys should be able to close the modal (Example: ["Escape", "Enter", " "])

I found an edge-case where if the dialog is opened by the parent component by a certain key and the modal is configured to close with that same key, it will immediately close after opening. For example, the parent decides to open the modal when the enter key is pressed down. If the modal is configured to close with the enter key, it will immediately close once that same key that was used to open it is released.
To fix this, I added a boolean to track if a key that is used to close the modal has been pressed down. This boolean is then checked before closing the modal from a key press. This makes it so the modal will not close unless the key configured to close it is pressed down and then released.

One controversial change worth mentioning is backwards compatibility. Any previous usages of this modal that had clickToClose set to false will now close when the Esc key is pressed (unless the parent is changed to pass an empty array to the keysToClose prop).
My justification for this change is to allow for the capability for the dialog to not be closable by clicking, yet still be closable by the keys specified in the parent.
If we wish to have this commit perfectly backwards compatible, adding back the "if clickToClose" statement surrounding the add/remove listener lines will do the trick, but it won't be possible to have the dialog not closable by clicking, yet closable by pressing a key.

One last point to mention is that if we wish for Dialog.vue to also allow the parent to set the keys to close it, it will need a simple change to take the keysToClose prop in-and-out.

The parent component provides the keysToClose prop with an array of strings specifying which keys should be able to close the modal (Example: ["Escape", "Enter", " "]) I found an edge-case where if the dialog is opened by the parent component by a certain key and the modal is configured to close with that same key, it will immediately close after opening. For example, the parent decides to open the modal when the enter key is pressed down. If the modal is configured to close with the enter key, it will immediately close once that same key that was used to open it is released. To fix this, I added a boolean to track if a key that is used to close the modal has been pressed down. This boolean is then checked before closing the modal from a key press. This makes it so the modal will not close unless the key configured to close it is pressed down and then released. One controversial change worth mentioning is backwards compatibility. Any previous usages of this modal that had clickToClose set to false will now close when the Esc key is pressed (unless the parent is changed to pass an empty array to the keysToClose prop). My justification for this change is to allow for the capability for the dialog to not be closable by clicking, yet still be closable by the keys specified in the parent. If we wish to have this commit perfectly backwards compatible, adding back the "if clickToClose" statement surrounding the add/remove listener lines will do the trick, but it won't be possible to have the dialog not closable by clicking, yet closable by pressing a key. One last point to mention is that if we wish for Dialog.vue to also allow the parent to set the keys to close it, it will need a simple change to take the keysToClose prop in-and-out.