-
Notifications
You must be signed in to change notification settings - Fork 1
Description
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
Actual
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);
}
}