How can I prevent the Keyboard Widget to loose focus

#1

Or: Why does it loose focus?
Dear Tiddlywikians,
I am working on a new edition of my roguelike dungeon and I am trying to implement Keyboard-navigation.
I used w-a-s-d for navigating the map but this just works once … and then has to be reactivated by clicking the map.
Best Wishes Jan

How to focus the cursor after pasted text
#2

This is expected behaviour, if you change the tiddler, that contains the edit-widget, because if the tiddler is changed, it will be redrawn automatically. So the input will be reinitialized too.

With TW v5.2.0 there have been some improvements to this behaviour.

So which TW version do you use?

#3

Hello Mario,
I had already updated the wiki.
Should the element that has the focus and triggers the keyboardevents be placed outside the tiddler that is modified?

#4

If you have a complex UI, you may have a reference to the field that gets updated somewhere in the stack where the Keyboard Widget sits. If so, that whole tree of widgets gets re-rendered.

#5

Thanks a lot Mario: If I put the keyboard-widgets into a different tiddler and now it can keep the focus.
Next question:
How do I set the focus to an edit-text-widget which is in a viewttemplate after closing a modal?

I tried to close and reopen it with a reveal widget to get the focus again, but the cursor than lands one millimeter too far left and below the edit-widget and the input is not captured. Is there a cure for this?

#6

@JanJo Finally something I can help with !

You define the element you want in focus (css selector):

\define get-input-focus-selector() [data-tiddler-title="$(storyTiddler)$"] input.yourclass

Then you call it like this :

<$action-sendmessage $message="tm-focus-selector" $param=<<get-input-focus-selector>>/>

In a triggering widget :slight_smile: (with a custom closing button for example, or with the EventCatcherWidget)

#7

Yeah,
but the edit-text-field is not in a tiddler in the story river but in tiddler transcluded buy a tiddler tagged a pagetemplate…

#8

I’m not sure I understand how this is an issue ? As long as the html element you want to focus is being rendered, the CSS selector should be able to target it…

I used this recently for my basic data tiddler editor, a viewTemplate I made to quickly edit data tiddlers. It shows two field : one to create a key and one for the value, when the user press enter the focus is set to the “key” field to make things a bit faster.

Can you take a look at this and see if this is a similar use-case to what you want to do?

https://telumire.be/TiddlyTweaks/index.html#recipe%201:[[recipe%201]]%20[[Data%20Tiddler%20Editor]]