demos/SearchFocus.html

<!--
  Codepen sample: https://codepen.io/kellyhutchins/pen/XWPMajM
-->

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Search Popup Focus</title>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.26/esri/themes/light/main.css"
    />
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <script src="https://js.arcgis.com/4.26/"></script>
    <script>
      require(["esri/Map", "esri/views/SceneView", "esri/core/reactiveUtils", "esri/widgets/Search"], (
        Map,
        SceneView,
        reactiveUtils,
        Search
      ) => {
        const map = new Map({
          basemap: "satellite",
          ground: "world-elevation"
        });

        const view = new SceneView({
          scale: 123456789,
          container: "viewDiv",
          map
        });

        const search = new Search({
          view
        });
       
        // Add the search widget to the top right corner of the view
        view.ui.add(search, {
          position: "top-right"
        });
        
        search.on("search-complete", () => onSearchComplete());
        // Add the search widget to the top right corner of the view
        view.ui.add(search, {
          position: "top-right"
        });
        let abortController = null;

        async function onSearchComplete() {
          abortController?.abort();
          const { signal } = (abortController = new AbortController());

          // When the popup is visible set focus on it.
          await reactiveUtils.whenOnce(() => view.popup.visible, signal);
          view.popup.focus();

          // And when the popup is closed move the focus back to the search wiget.
          await reactiveUtils.whenOnce(() => !view.popup.visible, signal);
          search.focus();
        }
      });
    </script>
 
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>