Text input of 'search' type has lost its clear field option

App Building
1

until last week, when a text input of type ‘search’ was used, it came with a cross on right side allowing to quickly clear the field.

I noticed today that this behaviour is gone and that one has to select the content of the field and suppress it, which is far less convenient.

Did a recent update break this ?

thanks

2

Hey @jfpaccini and welcome to the community! I checked out an old branch (a few weeks ago) and can’t find a version that ever had a clear button for the “search” type in a textinput component. Not sure if your setup might have changed, but I’m pretty sure we never supported this?

3

Hi @justin

thank you for your answer. This is kind of weird though, because I am fairly positive about this clear button: I remember having a “haha moment” when I discovered that when enabling search type, one could easily clear the field. ¯\_(ツ)_/¯

Can you describe what the purpose of the ‘search’ type is ? because I could not find any use except this clear button.

Thanks!

4

Hey @jfpaccini! So our data types for the textinput component are borrowed from the HTML5 spec for input types. So the search type corresponds to this: <input type="search"> - HTML: HyperText Markup Language | MDN

It seems like they're basically identical to the text type, so I'll probably try and remove this soon :slight_smile:

5

hi @justin

ok, I get it ! This is standard browser behaviour that was triggered previously in retool, but is not anymore.

When going to <input type="search"> - HTML: HyperText Markup Language | MDN and entering something in the field I get this:
image

so I get the clear button ! and it used to work in retool too (hence my "haha moment" :slight_smile: )

So that is sweet, please do not remove this capability !

Now the problem is why is this not triggered anymore ? I tried to tweak the CSS properties in the dev tools, but could not find the reason.

(for the record, I use Edge Dev 86.0.615.3 (chromium) on win 10; Tested on Chrome 84.0.4147.135 and same behaviour)

thanks

6

@justin oh, and BTW in Retool, when using a multiselect widget, we have the clear button:

image
image981×91 8.29 KB

7

I often see people use dropdowns or multiselects for search functions, and displaying the top results in the values which come up as options. Both have the .searchValue property which can be used for server sided search, or for smaller data sets they naturally do local search on their Values/Display Values arrays