Keyboard shortcut for closing a modal

#1

Hi folks,

I’m trying to implement a keyboard shortcut that will let me close a modal that I’ve opened.

I’ve got a “close action” tiddler that’s like this:

<$action-sendmessage $message="tm-close-tiddler" $param="$:/phajas/spaces/modal"/>

that’s tagged with $:/tags/KeyboardShortcut and has a key that’s cmd-0. I can see it being called if I add an action-log below the action-sendmessage, so I know that the key combo is being detected.

I can open $:/phajas/spaces/modal in a modal, but hitting cmd-0 will not close the modal. If I put the action-sendmessage in a button inside $:/phajas/spaces/modal, it works.

I must be doing something wrong. How can I close a modal with action-sendmessage from a keyboard shortcut?

#2

I also want to do this for [BUG] Page Layout switch menu is not convenient · Issue #7067 · Jermolene/TiddlyWiki5 · GitHub but had no clue!

#3

You might find this relevant: Issue: Modal windows and keyboard shortcuts · Issue #4512 · Jermolene/TiddlyWiki5 · GitHub

#4

Thanks saq. That gets me closer (by wrapping in a $keyboard widget), but still having trouble:

  • The modal doesn’t have focus, so I need to focus a field inside the modal before the shortcut works
  • The tm-focus-selector message doesn’t let me focus the modal after opening it - this may show my lack of understanding of JS and DOM focus support. I tried this:
<$action-sendmessage $message="tm-focus-selector" $param=".tc-modal-body"/>

and a custom class field in the modal, but no such luck.

#5

Wrap the contents of the modal inside a DIV and give the DIV a tabindex attribute, to allow it to receive focus: tabindex - HTML: HyperText Markup Language | MDN

Another alternative is to have an $edit-text widget in the modal (could even be hidden) that grabs focus on creation using the focus attribute of the widget.

1 Like
#6

Thanks saq, but I’m still running in to some issues with this approach.

Here’s my modal:

<$keyboard key="cmd-0" actions="""<$action-sendmessage $message="tm-close-tiddler"/> """>
<div tabIndex="0" class="phajas-modal">
<$list filter="[all[current]get[open]]" variable="open">
<$transclude mode="block" tiddler=<<open>>/>
</$list>
</div>
</$keyboard>

and my open action:

<$action-sendmessage $message="tm-modal" $param="$:/phajas/spaces/modal"/>
<$action-sendmessage $message="tm-focus-selector" $param=".phajas-modal"/>

and my close action:

<$action-sendmessage $message="tm-close-tiddler" $param="$:/phajas/spaces/modal" $tiddlerTitle="$:/phajas/spaces/modal"/>

but I’m not able to close the modal with a hotkey. Am I misusing tabIndex?

Thanks again.

#7

Alright, I tried with an edit-text, but it doesn’t seem to focus when opened in a modal. It does focus in a normal story river, though:

<$keyboard key="cmd-0" actions="""<$action-sendmessage $message="tm-close-tiddler"/> """>
<$edit-text field="asdf" focus="yes"/>
<$list filter="[all[current]get[open]]" variable="open">
<$transclude mode="block" tiddler=<<open>>/>
</$list>
</$keyboard>

I wonder if there’s some issue with modals and focus?

#8

The tabindex property is all lower case. Try this code again with this correction.

Also make sure that the $:/phajas/spaces/modal tiddler is not open in the story when you trigger the modal, otherwise the DIV in the story will get focus. You can avoid this issue by making your selector more specific, for example:
.tc-modal .phajas-modal

Also, change the close action to:
<$action-sendmessage $message="tm-close-tiddler"/>

1 Like
#9

Bingo! PEBKAC with my reading of Mozilla’s docs.

Thanks for everything, saq!

1 Like