Auto highlight text input when selected

Hi all looking for some advice,

i have a text input widget that has a default variable value of “enter your name here”

however i noticed that when i run the app on a tablet, i have to click on the box, then manually clear the default value. (i need the default value as the variable is used to filter a list of names i want to hide until the user is entered)

is there a way to auto highlight the text in the text input widget when its selected so all the user needs to do is either hit the backspace once or start typing something and the default value clears?

thanks in advance for any tips!

There exists (yet) no trigger for “on input field enter” events.
But you can use the custom widget “change dectector” to recog if the default value was changed.
image

when changing something inside the input field, the widget changes the background color
image

When you always set a boole’sche variable like b_unsername_set to “True”, you can use this for controling the leave of the step

Only a spontaneous idea, if I understand you correctly :wink:
Regards Chris

I had similar thoughts…
You could also make the Inpt slightly transparent and make a text behind the input.
When the change detector fires, the color of the text in background, can be changed to transparent, as lonbg as the length is > 0

Hi @ChrisF thank you very much for that.

i perhaps should have been more clear in my question. i dont need the background to be highlighted upon click, i need the text to be.

this is my default text input value when app is running:

image

i want the input to be highlighted like above each time it is clicked to save the user time manually hitting backspace a few times

i also need this default value in as it is filtering an interactive table that displays users names from this input.

thanks

@knowlec There is no way to achieve this in TULIP yet.

The Change detector can be used to delete the placeholder text instead. I think that is the reason why you want to higlight the text (to automatically get overwritten).

Or you use the change detector to change the textcolor of a placeholter text which is not in the input but behind it. Then it would disappear in the moment you pot text in the input…

I quickly set up an example… is that close to your target?

Input_Placeholder

or, if you use the default text, you can clear the variable when changing the default text by typing the first key. But it’s a little bit tricky to handle the input, because the change detection triggers by any changes.

Regards Chris

thanks both @ChrisF and @thorsten.langner

could you perhaps share how the custom widget was built and i can try those triggers.

A possible simple workaround that ive come up with was just to create another dummy variable that is changed once the enter key is pressed in the text input:

image

interactive table filter:

image

default variables:

only crux here is that the user has to hit the enter key before the interactive table will show the users name to select.

Bonus point if anyone can come up with a way for the user to show without enter key being pressed! :slight_smile:

Hi
here my change detection widget setup:


The trigger is as shown above. With the Boole’sche variables it clears the input field with the first input (key or backspace or any other else) and stores the information that the default text was changed by switching the Boole’sche variable- Otherwise the trigger will clear for every typing key the input again :wink:

You could just trim this specific text. However I find this a bit more tricky, since there are several issues you can run into:

  • Curser is at the end or where ever you clicked and not where you really want to type. → behaviour is not intuitive
  • Checking for this text variable has always to be against the placeholder text and can never be chacked against empty
  • the way you set up the trigger the first letter gets also deleted and must be typed in twice
  • If you fix the point before you get another issue: If the Cursor is placed in the middle it gets hard to separate the original and the input text.

All in all it can result in unwanted values in this text variable. Thats why I tryed to find a solution with no overlap or influence on the actual value.

sorry i meant the custom widget in settings setup. Im not that proficient in html/CSS/JavaScript

i tried your trigger using the “Custom input text” widget that is provided in the tulip library app, needless to say it did not work as yours did.

im a bit confused by your solution, does this just change the background color?
im looking for the solution to change a variable input as the variable input is a filter in my interactive table

hi,

The issue here is that my interactive table is a list of all users which i want filtered by the text input. As i don’t want a list of all users showing by default, i created a default with a default value “your name here” so that there would only be records shown once the user starts typing in the text input… as there is no user with the name “your name here” the table will be blank by default.

this is why i believe this solution does need to influence the actual value as the actual value is what is filtering my interactive table. (unless i use a dummy variable as shown earlier)

was just seeing was there a cleaner way to do with with less manually clearing of the value…

Then you can add a Filter_Text variable and overhand the input_text to it. If its empty you set Filter_Text = “##__xx??” or a random string thats not likely to be a name. This can also happen in the change detector at the same time.

The solution to actually manipulate the input string by change detection is possible but tricky with many pitfalls.

No, switching the background color and clearing the input field
Here a short video:
2023-03-02_13h08_04

The widget is from the library

not perfect but a possible workaround due to the limitations of Tulip?
And yes: the first input must be typed twice

But in your gif you hit space to clear the value and then start typing.
If you just start typing, the first letter will be missing.
What is the benefit of this solution?

Changing the BG Color is also possible with other solutions but was not the actual issue.

then I thought/understood it wrong… :thinking:
So I added the last

The first question was how to delete the default text without pressing back too often.
I’m using the bg color for mandatory fields.

And you know: there are many ways to Rome :slight_smile:

Is i mentioned your solution is possible but I find there are pitfalls…

So thats for shure a preference. I just find it easier to maintain and more intuitive for the user of the app on “my” way.

As ChrisF metioned, you could use the one from the library:

Change Detector Widget Unit Test | Frontline Operations Platform (tulip.co)

You can also adjust it to monitor several variables of different types…