v3.4.3 breaks GmapInfoWindow

[vesper8]

Working perfectly on v3.4.2

On v3.4.3 the slot seems to be broken because my info window completely fails to appear.

v3.4.2:

v3.4.3:

Love your package but it's a bit concerning how such regressions are slipping through the cracks...

[close-issue-app]

This issue is closed because it does not meet our issue template. Please read it.

[vesper8]

@diegoazh Sorry for not filling out your issue template, I hope you fix this bug anyway. Till then I'll be on 3.4.2

[create-issue-branch]

Branch issue-254-v3_4_3_completely_breaks_GmapInfoWindow created!

[diegoazh]

@vesper8 can you share your implementation of the info-window component?

[diegoazh]

I tested v3.4.3 and it works as expected with the old form, using the options prop with content inside, and using the new prop content it works well too. I let you a print below:

Please can you share your implementation or a minimum repository to reproduce your bug?

[vesper8]

@diegoazh I have a component called MapInfoWindow:

<template>
  <GmapInfoWindow
    :opened="infoWindow.open"
    :position="infoWindow.position"
    :options="infoWindow.options"
    @closeclick="closeInfoWindow()"
  >
    <div v-if="infoWindow.content">
      <div class="flex flex-col items-center justify-center">
        <div class="font-bold py-2">
          {{ infoWindow.content.name }}
        </div>
        <div>{{ infoWindow.content.location.n }}</div>
        <div class="py-2 flex flex-wrap space-x-1">
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-black capitalize border-black border">
            NetSetGo
          </span>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-white text-black capitalize border-black border">
            Junior Comp
          </span>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-white text-black capitalize border-black border">
            Fast5
          </span>
        </div>
        <div class="pt-2 mb-2">
          <button
            type="button"
            class="inline-flex items-center pl-4 pr-2 py-1 border border-transparent shadow-sm text-base font-medium rounded-md text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500"
            @click="onView()"
          >
            View
            <svg
              class="w-6 h-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            ><path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 5l7 7-7 7"
            /></svg>
          </button>
        </div>
      </div>
    </div>
  </GmapInfoWindow>
</template>

<script>
import { components } from "gmap-vue";

export default {
  components: {
    GmapInfoWindow: components.InfoWindow
  },

  props: {
    infoWindow: {
      type: Object,
      default: () => ({}),
    },
  },

  emits: ['closed'],

  methods: {
    closeInfoWindow() {
      this.$emit('closed');
    },

    onView() {
      console.log('onView');
      Bus.emit('modal:show', 'organisation-modal');
    },
  },
};
</script>

<style>
.gm-style-iw-t > div button.gm-ui-hover-effect {
  @apply border-0 shadow-none outline-none ring-0 pt-2 pr-2 !important;
}
.gm-style-iw-t > div button.gm-ui-hover-effect img {
  @apply w-6 h-6 m-0 !important;
}
</style>

I use it like this:

          <MapInfoWindow
            :info-window="infoWindow"
            @closed="closeInfoWindow()"
          />

  methods: {
    toggleInfoWindow(marker) {
      this.infoWindow.position = { lat: marker.location.lat, lng: marker.location.lng };

      this.infoWindow.open = true;
      this.infoWindow.id = marker.location.id;

      this.infoWindow.content = marker;
    },
  },

This has worked perfectly on v2 and up to v3.4.2, then all of a sudden in 3.4.3 it stopped working.

I don't really understand what you mean with the options and content prop, if you could provide an example I can see if I can modify my code. I just wanted to point out that it was working fine until now so whatever happened in 3.4.3 it broke what was previously working.

Thank you for your help

[diegoazh]

Thank you. It is weird because I only added new props. But, I'll check again and test your component.

[vesper8]

@diegoazh As I'm not using your new content prop, but instead just replacing the default slot with the content, perhaps this is what's causing the conflict? When the prop is not provided, it does not correctly fall back on the slot?

And what if both the slot and the prop was provided, which would take precedence?

[github-actions]

🎉 This issue has been resolved in version 3.4.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[diegoazh]

The problem was the default content of the new content prop, at runtime, it overrides the content of the default slot.
I updated the documentation with a warning of using one of these two ways to pass data to the InfoWindow component and notice the user that the content prop has precedence over the default slot.
Can you test the new version and confirm if it is working as expected?
Regards.

[vesper8]

@diegoazh Can confirm everything works again in 3.4.4 : )

Thanks for the fix!

[vesper8]

@diegoazh On a side note, I'm using gmap-vue in a Vue 3 project right now, in combination with @vue/compat. Everything works fine but I get a few warnings in the CLI console. @vue/compat saves the day but I look forward to your new release that will be fully compatible with Vue 3 : ) I understand you're slowly getting that ready. Keep up the good work!