Fix: autosuggest breaks search blocks

[dinhtungdu]

Description of the Change

Autosuggest changes the frontend markup of the search field to add the suggestion list, while it works for the normal search field, it's breaking the search block styling due to CSS conflict between autosuggest and search block. Because the markup of the search block is predictable, this PR adds a separated behavior for search field in the search blocks that reuses the block markup to add the suggestion list and required class.

Alternate Designs

n/a

Benefits

Make autosuggest work with search block, which is a preparation for full site editing.

Possible Drawbacks

n/a

Verification Process

1. Enable and configured Autosuggest features.
2. Create a new page and add a search block.
3. View the page on the front end, type a keyword, see the suggestions.

Checklist:

• I have read the CONTRIBUTING document.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my change.
• All new and existing tests passed.

Applicable Issues

#2211

Changelog Entry

Fixed the styling issue of Autosuggest and search block.

[dinhtungdu]

Some screenshots:

The breaking style:

The style after applying this PR:

[Rahmon]

Hi @dinhtungdu

When the result has more than one item, the list appears cut and I can see just the first item.

ep-search.mp4

[dinhtungdu]

@Rahmon Look like you used 2020 for your test. That issue causes by 2020 styling which set overflow: hidden; to the <main> element:

It really depends on the theme styling to fix that issue. The issue doesn't occur on Storefront for example:

[Rahmon]

@dinhtungdu got you.

Looks good to me. But I would like to have second thought here so I'm adding @JakePT as a reviewer too since he can contribute with your frontend knowledge.

[JakePT]

@dinhtungdu Just added a small suggestion.

[dinhtungdu]

@JakePT Thanks so much for the tip! @Rahmon I force-pushed the branch to clean the history and the diff. This PR is ready to review again.