input loses focus when re-rendering contents

[mwlang]

In an attempt to implement a type-ahead search/filter on an input in the body of the app, the focus on the input is lost when the app renders refreshed content.

The goal here is to be able to have two or more search/filter inputs.

[gliechtenstein]

I just started looking into this and became curious: how are you refreshing while you're typing in the first place?

I don't think the textfields are able to trigger any action while you're typing, so not sure how you would implement a realtime typeahead on a textfield component.

Also would be helpful to have a code I can try out to understand the situation better. Thank you!

[mwlang]

I don't think I did anything fancy. It's just a simple trigger action assigned to the textfield:

                    {
                      "type": "textfield",
                      "name": "search_facility",
                      "placeholder": "Search",
                      "action": {
                        "trigger": "search_facilities",
                        "success": {
                          "type": "$render",
                          "options": {
                            "template": "facilities"
                          }
                        }
                      },

Let me know if you need to see more code than this.

[gliechtenstein]

Hmm the action attribute is not supposed to be documented anywhere. How did you find it?

The reason it's not documented is because in the current state, the feature is pretty limited. In most cases you would want to use this feature with $render, but the problem is $render redraws all the items in the tableview, which leads to the keyboard being hidden. So even if we fix the focus problem, we still have a bit of a jerkiness because the keyboard will hide and immediately redraw.

I did try to fix the focus issue, and got to a point where it restores the previously focused field right after re-rendering, but we still have the keyboard hide/show problem I mentioned above. Here's what it looks like: https://youtu.be/uweDNMFRot0

We could merge this but I don't think it's a good idea since the keyboard jump/delay looks awful. You can notice the keyboard hiding and showing everytime you type a new character.

I do want to come back to this at some point and get this to work (probably by implementing some sort of partial rendering logic) but for now I think we'll have to just do without this fancy typeahead effect. I'm sure there will be some creative (and nice) ways to handle the type of input you're dealing with without doing the typehead UI.

anyway sorry I couldn't help immediately. will return to this in the future when other high priority tasks are finished. Hope you understand.

[mwlang]

@gliechtenstein thanks for taking the time on this one. I completely understand prioritizing effort, so no worries.

First, can you publish your working fix somewhere I can grab it? (either a branch commit or patch file here). I agree it does look jerky, but gives me something to work with until I figure out something better.

I'm trying to figure out alternative ways to approach this, but as this is my first mobile app, I'm a little stuck on ideas since I don't know what's generally (i.e. easily) possible vs. "you're gonna have to break out and learn Objective-C and build it yourself" One suggestion you mentioned was having the input in the header. Can all three inputs, To, When, and Where be housed in the header section or is it just one input at a time there?

[mwlang]

Also, I didn't so much find "action" attribute as simply tried it and it worked. I'm a Ruby guy after all. If I see something work somewhere else, I intuitively try the same thing elsewhere and that's pretty much been my experience with Jasonette. I just try stuff and it works. :-D

[gliechtenstein]

Please check out this branch, i made it just for you haha https://github.com/Jasonette/JASONETTE-iOS/tree/action_for_textfield_and_textarea