Skip to content

[BUG] slot="search-control" not properly respecting search_control_position #57

@TrplM

Description

@TrplM

Describe the bug
Using the google maps provider and given search_control_position="1" we would expect the search slot to be displayed on the top left, instead the search-slot is offset to the right

Using @what3words/react-components@5.0.5

To Reproduce
Run npm --workspace @what3words/javascript-components run dev with attribute search_control_position="1" in packages/components/javascript/src/index.html

    <what3words-map
      api_key=""
      map_api_key=""
      zoom="8"
      selected_zoom="20"
      lng="-0.114637"
      lat="51.454843"
      search_control_position="1"
      map_type_control
      zoom_control
      fullscreen_control
      fullscreen_control_position="3"
      current_location_control_position="9"
      disable_default_ui
      marker_icon="https://uploads.codesandbox.io/uploads/user/f46b5c93-0a1e-4bce-a99b-9a25b8ce15b9/tWGo-redmarker.png"
      language="de"
    >

Expected behavior
search slot should respect ControlPosition

Screenshots
Expected

Image

Actual

Image

Desktop (please complete the following information):

  • OS: Windows
  • Browser Chrome & Edge
  • Version 144.0.7559.134

Additional context
There seems to be a layout conflict in loading google maps provider and rendering the search control, this issue is especially prevalent when the initial words attribute is not set i.e. the onLoad() function does not call await this.setWords(words);.

For example adding this to onLoad() seems to resolve the issue

    async onLoad() {
      const { words } = this;
      const isBrowser = typeof window !== "undefined";
      const searchControl = this.el.querySelector(SEARCH_CONTROL_SELECTOR);
      
      await new Promise((resolve) => setTimeout(resolve, 0)); // <--- Adding this line
      
      if (isBrowser && this.watch_location) {
        await this.watchPosition();
      } else if (isBrowser && this.current_location) {
        this.getCurrentPosition();
      }
      if (words) {
        await this.setWords(words);
      }
      if (searchControl && this.provider) {
        this.provider.addControl(searchControl, this.search_control_position);
      }
    }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions