Search field pattern

[elainelylee]

Would like to use the same search field pattern as what we will launch for console nav, if that's appropriate. One thing that is missing is the quick ability to clear the search field to reset the search. Using the component that we have, we will need to create a text link or icon outside of the input field to clear that input field. What about a pattern where the X icon shows up inside the input field?

Something like this:

Ultimately, whatever we create for search, will it be a pattern that we can use, as I am creating search for transcriptions?

[kate-porter]

Hey @elainelylee - so sorry for the delay on this one! Chatting with the team now, we'll get back to you soon.

[SiTaggart]

I'm not saying this is the right answer, but right now we currently support the native HTML search input type which has a similar behaviour. I just can't guarantee what that looks like across all browsers.

Sandbox for example:
https://codesandbox.io/s/search-box-6wr7v?file=/src/index.tsx

[kate-porter]

Is it possible to add custom styling to that native search so that we can control the appearance?

[elainelylee]

It would be great if this is available in Paste. Don't necessarily want to create a "clear field" pattern ad hoc.

[SiTaggart]

In some webkit based browsers yes to an extent, but if it doesn't work in Edge or FF then you can't do anything about it.

[kate-porter]

@elainelylee Simon created a few other options for you to add the 'clear' functionality to your search field in this code sandbox.

If you need to get this out soon, you can go with one of those options for now. I'm partial to #3 personally - feels cleanest. We have also added this functionality to our backlog to systemize this 'clear' functionality, so we can keep you in the loop on that when we get there. What's your timeline for this?

[elainelylee]

Thanks for this code sandbox. With these options, are we saying that the Magnifying glass icon will not be clickable? The user can only send the search via tapping on return?

[elainelylee]

For option 3, if we have the magnifying glass as an additional way someone can submit their query, then swapping it to an X may cause issues. Or, if someone else uses the right icon space to have an info icon that can open a popover, then replacing it with an X will lose the ability for someone to get more info. Regarding timeline, we're in prototype stage and our team is pretty fast at prototyping. If this is available in the next couple of weeks for them to implement, that would be great. Otherwise, we'll either forego it or use the native html version until the pattern is available.

[kate-porter]

Thanks for the update on your timeline. It's very unlikely we'll have this pattern designed and built within the next couple of weeks, so my suggestion would be to either forego the "clear all" behavior (which should be fine, especially in the prototyping stage) or choose whichever option from the code sandbox you think suits your needs best. And we will keep you updated on our progress regarding getting this pattern systemized.

[kate-porter]

@elainelylee do you have what you need for now on this?

[elainelylee]

Yes, will speak with the team about it. thanks.