How to focus on the input field of a search box in a modal when invoked by a keyboard shortcut

#1

I use a search box in a modal window which is invoked by using a keyboard shortcut. But the focus is not on the input field of the search box when invoked.

  1. Go to this demo - https://multicolumn-krystal.tiddlyhost.com/
  2. Press Shift+L
  3. A modal search window opens without focus in the input field of a search box.
  4. This is the tiddler responsible for the search box - MW43
  5. How to focus on the input field of this search box when invoked by a keyboard shortcut
1 Like
#2

I don’t have the answer but believe it s documented somewhere on tiddlywiki.com see

#3

Make sure that the focus attribute of the edit-text widget is set to yes.

#4

Hi @arunnbabu81,
that is a beautiful edition you made there.
The idea to be able to switch layouts completely by keyboard is very usefull, but i am struggling with this also.
There are some things I do not know yet:
How to have a shortcut not related to an editText-field that only works in a certain layout or under a certain condition?
eg. it would be practical to be able to close a modal by pressing escape.

#5 
<$edit-text tiddler="$:/temp/advancedsearch" type="search" tag="input" class="testclass" placeholder="Search" focus="yes"/>

I changed this part of the code in this tiddler to include focus="yes"
But still the focus is not on the input field of the search box in the modal when it’s invoked using the keyboard shortcut.

#6

I didn’t fully understand what you were trying to convey.

I also like to close the modal by pressing escape or by pressing anywhere outside the modal window. Have to leran how to implement it.

This lightbox by @telumire shows another way of closing the modal. Might be of help.

#7

I was also looking for a similar solution as I am trying to get rid of a bunch of custom code in my project. After banging around on it for about a day, I have come up with a slight hack that doesn’t depend on any custom coding.

Modal Focus

In short:

  • $action-sendmessage will emit any string as a message.
  • Place this within a triggering element like $button set to emit a custom message.
  • Wrap the button with a $messagecatcher that will listen for this custom message which will then fire off a tm-focus-selector message that targets your $edit-text class.

Tiddler to Launch Modal

\define actions()
<$action-sendmessage $message="tm-focus-selector" $param=".my-class"/>
\end

<$messagecatcher $tm-custom=<<actions>>>
<$button>
Show Modal
<$action-sendmessage $message="tm-modal" $param="ModalFocus-modal"/>
<$action-sendmessage $message="tm-custom"/>
</$button>
</$messagecatcher>

Modal Tiddler

<$edit-text tag="input" tiddler=<<currentTiddler>> field="my-field" class="my-class"/>
3 Likes
#8

Welcome @roma.hicks thanks for contributing. I did not know I wanted this but I do now you tell me.