race condition in LeafletBackendModule

[lisardo2]

Bug Report

Current Behavior
in the LeafletBackendModule at the end of method initialize() createMap() is called. Thes method checks if this.longitude and this.latitude are present. If not, this.geocode(); is called.

Problem is, that this.geocode(); is an async function with an await fetch command.

Just after calling this.geocode(); this.latitude and this.longitude are checked again, and if not set, the coordinates of Kopenhagen are set. This check runs without waiting for the result of his.geocode()!

So every time the result of his.geocode() is just a tiny bit delayed, the coordinates of Kopenhagen are set.

Expected behavior/output
Waiting for the result of his.geocode() before testing this.latitude and this.longitude again.

Environment

• TYPO3 version(s): 13.4.24
• tt_address version: 9.1.0
• Is your TYPO3 installation set up with Composer (Composer Mode): yes
• OS: every

Possible Solution
I fixed the problem with an intermediate method:

initialize() does not call createMap() but the following method:

prepareMap() {
    if (
      (!this.latitude ||
        !this.longitude ||
        (this.latitude == 0 && this.longitude == 0)) &&
      this.geoCodeUrl != null
    ) {
      this.geocode();
    } else {
      createMap();
    }
  }

and async geocode() calls createMap() when the response is fullfilled.

  async geocode() {
    try {
      let response = await fetch(this.geoCodeUrl);
      let data = await response.json();

      if (data.length === 0) {
        response = await fetch(this.geoCodeUrlShort);
        data = await response.json();
      }

      if (data.length !== 0) {
        const firstResult = data[0];
        if ("lat" in firstResult) {
          this.latitude = firstResult.lat;
        }
        if ("lon" in firstResult) {
          this.longitude = firstResult.lon;
        }
      }
      this.createMap();
    } catch (error) {
      console.error("Error fetching geo data:", error);
    }
  }