Reset widget to original state on click

Hello everyone, this is my first post…

In the above prototype, the ‘From’ form field is engaged by clicking on the ‘Nearest’ link. You can tap a location from the dropdown to populate the field and empty the field by clicking the ‘X’ that appears.

The ‘To’ field is a search that engages when the user searches for Glasgow and taps the desired selection. This also can be emptied by the ‘X’ icon.

The issue I have is that when ‘X’ is clicked the ‘To’ field to empty it, I want the text field to return to its original state so I can repeat the process again and again but I’m struggling to get it working.

Hello @Orbital, welcome to the forum.

Thank you for posting your HTML. It helps people understand your description of the issue. It will be much easier to help you if you can also post your .rp file. Otherwise, we’re left to guess at how you’ve implemented this, and can’t test out and demonstrate good solutions for you, makes it hard for others to learn from this, etc.

It looks like you’ve initially set the hint property for the text field to “To”, but when ‘X’ is clicked, you then set the text to “To” instead of “” (blank). A little hard to tell because the styling of the hint text and entered text is the same (poor usability), but if the text value of the input field were indeed blank (thus automatically triggering the hint text to show) then entering any text would clear the hint, instead of beginning the text entry with “To”. This is something you should fix, but even so, this is not likely the root of your issue because backspacing to clear “To” and entering “g” should show your autofill dropdown menu.

My guess is that you need to fix the logic for your conditional case on the “To” text field. I notice that even if I don’t click the ‘X’ the dropdown is never shown a second time. For example, if I enter “z” the dropdown shows with one entry (Glazebrook); I select that entry and the text field value gets set to “Glazebrook” and the dropdown hides; If I then backspace to delete all text and enter “z” (or “g” or any char) nothing happens.

So, what are the exact conditions you have set for showing the dropdown? Is it via OnTextChange or OnKeyUp? (The latter should be more reliable.) If it is a “Show, slide down” does it also include the checkbox option to “Bring to front”? Try that. If your dropdown is a dynamic panel and changes states when shown/hidden, be sure that the dp is changed back to its initial state when hiding the dropdown.

Or, perhaps you are inadvertently causing a bug when you hide the dropdown. Does it get sent to back? If so, be sure to “bring to front” when it is shown (or state changes) by selecting that checkbox option (under MORE OPTIONS in the action details.)

Hey @mbc66
Thanks for taking the time t respond in detail to me.
Here is the file, I hope it is enough to give you some more insight on what I’m doing wrong

The toggle on the ‘Nearest’ tab works like I want it to. That, and the two text field are the only interactivity so far.

I plan to also pass the values of the fields and the dropdown to a dynamic results page with times and trains etc. I think I can attempt that but any tips are welcome.

National Rail.rp (84.0 KB)

Any help out there?..Anyone?

Thank you for posting your .rp file. I found your error and fixed it.

National Rail 2.rp (115.9 KB)

Your auto-search feature is implemented by applying a filter to a repeater list, and that works well. When the user enters text in the “To” field, the Search Destination dynamic panel (dp) is shown–that dp contains a repeater list with all the possible destination stations, and the repeater is filtered by the text. When the user selects a station in the list, they do so by clicking the widget in your repeater. That widget’s Click interaction hides the repeater, when it should hide the dp. Otherwise, when you try to show the dp again (by entering new text in the “To” field) it does actually show but its contents–the repeater widget–remains hidden.

Also, your “X” buttons should indeed set the text field contents to blank and not to the same text as the hint.

So, you were super close to having this work–and this kind of bug–showing/hiding the wrong widget or layer–is pretty common, and unfortunately hard to trace and debug in Axure.

1 Like

@mbc66 Thank you so much for this. I was close but also on the verge of pulling my hair out so thanks for preventing that :grinning:

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.