pinafore/src/routes/_components/search/Search.html

<form class="search-input-form" on:submit="onSubmit(event)">
  <div class="search-input-wrapper">
    <input id="the-search-input"
           type="search"
           class="search-input"
           placeholder="Search"
           aria-label="Search input"
           required
           bind:value="$queryInSearch">
  </div>
  <button type="submit" class="primary search-button" aria-label="Search" disabled={$searchLoading}>
    <SvgIcon className="search-button-svg" href="#fa-search" />
  </button>
</form>
{#if $searchLoading}
  <div class="search-results-container">
    <LoadingPage />
  </div>
{:elseif $searchResults && $searchResultsForQuery === $queryInSearch}
  <div class="search-results-container">
    <SearchResults />
  </div>
{/if}
<style>
  .search-input-form {
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-gap: 10px;
  }
  .search-input-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .search-input {
    padding: 10px 15px;
    border-radius: 10px;
    flex: 1;
    width: 0;
    min-width: 0;
  }
  :global(.search-button-svg) {
    fill: var(--button-primary-text);
    width: 18px;
    height: 18px;
    flex: 1;
  }
  .search-results-container {
    position: relative;
    margin-top: 20px;
  }
  @media (min-width: 768px) {
    .search-button {
      min-width: 100px;
    }
  }
</style>
<script>
  import { store } from '../../_store/store'
  import LoadingPage from '../LoadingPage.html'
  import { doSearch } from '../../_actions/search'
  import SearchResults from './SearchResults.html'
  import SvgIcon from '../SvgIcon.html'
  import { on } from '../../_utils/eventBus'
  import { tryToFocusElement } from '../../_utils/tryToFocusElement'

  export default {
    oncreate () {
      on('focusSearchInput', this, () => this.focusSearchInput()) // user typed hotkey on this page itself
      if (this.store.get().focusSearchInput) { // we arrived here from a goto via the search hotkey
        this.store.set({ focusSearchInput: false }) // reset
        this.focusSearchInput()
      }
    },
    store: () => store,
    components: {
      LoadingPage,
      SearchResults,
      SvgIcon
    },
    methods: {
      onSubmit (e) {
        e.preventDefault()
        e.stopPropagation()
        /* no await */ doSearch()
      },
      focusSearchInput () {
        tryToFocusElement('the-search-input')
      }
    }
  }
</script>