How to remove annoying "Please Fill Out This Field" on 'pressed' and 'focused' state?

Design help General
1

I must make a search box open after clicking or tapping the search glass icon.

  1. I have built the page to the liking of my colleagues.
  2. We have a search bar. The search bar works.
  3. The search bar expands width on desktop as intended when user clicks inside the search box. This accomplished by setting tween time to 400ms time and adjusting WIDTH in ‘Pressed’ and ‘Focused’ states.
  1. Now we want to create in invisible search box that only expands IF the search icon is clicked.
  2. I built a dummy project below to showcase.
    http://html-sandbox.webflow.io
  3. In dummy example, by clicking on the search button, the width expands in the search box. As intended. There is an annoying message every time the search box is expanded.

How do we remove the annoying popup message? And force search button to allow toggle ONLY if search bar is expanded?

Other source for inspiration:
apple.com - search button.

2

You need to separate your reveal and search buttons that is all. Make an interaction that will replace the clicked reveal button with the actual search button and that should do it.

1 Like
3

Thank you dram.

I’ll try that as a work around, though I was hoping there was a way to force the existing button to operate under conditions of if ‘Pressed’ / ‘Focused’ THEN search icon button turns into a search submit button AND if Search-div is not focused or pressed, it simply functions as search bar expander.

Miek