Text input does not get unfocused

Hi all, earlier today I’ve added a text input element to my app. A soon as I click on the text input, it moves to a “focused” state and the keyboard is rendered. The problem is that I don’t mange to get the text input then unfocused and get rid of the keyboard, while staying on the same screen. Well, the only way I can do this is by adding a block telling the device to dismiss keyboard when I press on a button, but this is just a hack.
I can swear that it worked ok when I added it earlier today, but now the keyboard just won’t go away. Any idea what I can do to get the full screen again w/o the keyboard?
Thanks in advance.

Try setting your Text Input Multiline property to false and use this:

image

1 Like

Hi, thank you for the reply. It sorts of work, because when I press enter on the keyboard, then the keyboard disappears. The problems is that I’d like, if possible, to dismiss the keyboard when the user press on any other area on the screen apart from on the text input. The other issue is that in my case, this is a feedback input box, so I need to remain multiline.

I am testing tapping outside the Text Input on both iOS and Android and the keyboard dismisses so not sure why you are not seeing the same. Can you create a blank project, create only a text input and see if it works? If it does, then there must be something very specific with the way you lay your screen elements out.

1 Like

Hi, thanks again for the response!

Yes, I’ve created a new blank project and the text input worked as expected. When tapping anywhere else on the screen, the keyboard goes away.

I then went back to my app and I managed to get the keyboard go away, and I think that I found out what the issue is, which might still actually be a bug: My screen was full with row elements with top bar, text boxes and buttons (and the keyboard took the rest of the space when it was rendered). The way I managed now to get the keyboard away is by adding margins and tapping on the areas where there are no other elements on the screen (not even a row element). I did not check it with other elements, but I can confirm that tapping on rows, buttons or labels will not make the text input unfocused. I’ve just checked this also with the new blank project, and it seems to be the case there too.

Yet, now that I understand what the issue is, I’ll work around it. But do let me know if you can think of any other way around it.

Thanks!

1 Like

This is weird. I am tapping either the row or the column you see in the screenshot below and the keyboard dismisses… If I understand correctly, this does not work in your case?

1 Like

Yes, it does not work in my case on Samsung phone. Weird that it works for you :slight_smile:

Since you mentioned “Samsung”, I just tested on my S10 and it works there as well… in any case, feel free to mark any of the answers above as the “Solution” to this. Thanks.

OK, I am not sure about the cause of this, but it might be a specific issue for the device I am using, which is Galaxy Note 10. Thanks for your help.

When the text input is inside a container (row or column) then the keyboard will keep showing until you press anywhere outside the container.

It seems that Thunkable treats the whole row / column as the input field.

I experienced it a lot and Keep forgetting this behaviour when designing a new project.

Happy Thunking

3 Likes

Hi, I finally found what seems to be the solution for me, and just wanted to give another update on this in case someone runs into the same problem. So, after digging some more and trying different settings, I realised what the problem is and how to solve it. It is nothing to do with my specific device (apart from that it might be an issue with Android devices in general).

So, here is the explanation:

With text input boxes, another problem that keep repeating itself (in forum discussions) it that the keyboard squashes the screen (on Android at least, as far as I am aware). The recommendation that I often see in the forums is to make the screen scrollable and the heights of the elements absolute. Now here is the thing: I avoided this advice, because I did not care much about the squashing of the screen, and most of my elements on the app use relative sizes, so I just kept it to be consistent with other screens.

Now, it turns out that this problem is related to the issue that I raised above, that is that the keyboard then also does not go away when tapping anywhere else on the screen.

Long story short, I resorted to use scrollable screen and absolute heights of elements on the screen, and the keyboard is finally completely well-behaved on both aspects of not squashing the screen AND moving away when tapping outside of the input text box.

Thanks anyway for all the support and for the great platform.

1 Like