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.