Mapbox & React: Unable to input values into search box

Question

I'm using a combination of React/Mapbox (DeckGL more specifically) in a project. I want to include Geocoding for querying addresses.

My current output:

Generated with this code:

<DeckGL {...deckGLProps} ref={deckRef}>
        <StaticMap
          ref={mapRef}
          {...staticMapProps}
        />
        <div style={{ border: '5px solid black', top: 500, display: 'inline-block', zIndex: '9999'}}>
          <Geocoder
            mapRef={mapRef}
            onViewportChange={handleGeocoderViewportChange}
            mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
            position="top-left"
            minLength={1}
            trackProximity={true}
            countries={"us"}
            reverseGeocode={true}
            enableEventLogging={false}
          />
        </div>
      </DeckGL>

My problem: I'm unable to click on the search bar. This is shown by the strange positioning of the search bar within its div. Is there a way to place the component so that the search bar is clickable? I don't think it's a problem with the Geocoder component since the code in this example works fine.

Answer 1

Following the official react-map-gl-geocoder repo you can use containerRef prop in order to place the geocoder outside of the map (or whatever you want, note position: absolute css prop):

Example:

const geocoderContainerRef = useRef();

// render
return (
  <div>
    <div
      ref={this.geocoderContainerRef}
      style={{
        position: 'absolute',
        top: 50,
        left: 50
      }}
    />
    <MapGL
      ref={this.mapRef}
      {...viewport}
      onViewportChange={this.handleViewportChange}
      mapboxApiAccessToken={MAPBOX_TOKEN}
    >
      <Geocoder
        mapRef={this.mapRef}
        containerRef={this.geocoderContainerRef}
        onResult={this.handleOnResult}
        onViewportChange={this.handleGeocoderViewportChange}
        mapboxApiAccessToken={MAPBOX_TOKEN}
      />
      <DeckGL {...viewport} layers={[searchResultLayer]} />
    </MapGL>
  </div>
);