Stepper - Problem rendering map component in Step

I've created an example with our mdb-google-map and it seems to work fine:

  <section class="p-5">
    <mdb-col xl="6" lg="7" md="10">
      <mdb-card>
        <mdb-card-body>
          <h2 class="text-center font-weight-bold pt-4 pb-5">
            <strong>Steps form example</strong>
          </h2>

          <mdb-stepper within buttons>
            <mdb-step name="Step 1" slot="content" :number="1">
              <h3 class="font-weight-bold pl-0 my-4">
                <strong>Step 1</strong>
              </h3>
              <mdb-input label="First Name" />
              <mdb-input label="Second Name" />
              <mdb-textarea label="Address" />
            </mdb-step>
            <mdb-step name="Step 2" slot="content" :number="2">
              <h3 class="font-weight-bold pl-0 my-4">
                <strong>Step 2</strong>
              </h3>
              <mdb-input label="Company Name" />
              <mdb-input label="Company Addresws" />
              <mdb-textarea label="Address" />
              <mdb-google-map
                ref="map"
                manualInit
                name="reg"
                class="col-md-12"
                :markerCoordinates="coordinates"
                style=" height: 500px"
                :zoom="14"
              ></mdb-google-map>
            </mdb-step>
            <mdb-step name="Step 3" slot="content" :number="3">
              <h3 class="font-weight-bold pl-0 my-4">
                <strong>Step 3</strong>
              </h3>
            </mdb-step>
          </mdb-stepper>
        </mdb-card-body>
      </mdb-card>
    </mdb-col>
  </section>

In the past, we've had an issue with Leaflet like this one: https://mdbootstrap.com/support/jquery/leaflet-map-using-drupal-8-7-3/ which was caused by styling conflict. It's hard to say more without seeing the code.

Hi

thanks for reply and your example

maybe it is a leaflet issue - but I need to use leaflet and osmaps. Or at least not use google|

pretty sure it isnt a styling issue - my map component works fine on browser resize or if on 1st step.

re seeing code: yea sorry, I did intend to create a fiddle but it seemed too complex.

Anyway, I fixed the issue (I think) by forcing re-render of map component via incrementing key as here: https://michaelnthiessen.com/force-re-render

But to do that means digging to find activeStep - and it would be helpful to have this value available.

So heres a request:

Can mdbStepper emit event on changeActiveStep please.

I extended component like this:

changeActiveStep(i, unordered) {
  this.validateStep();
  let step = i < 1 ? 1 : i > this.numOfSteps ? this.numOfSteps : i;

  if (!this.validation) {
    this.activeStep = step;
  }
  else if (this.allowNext(step, unordered)) {
    this.checkForm();
    this.activeStep = step;
  }
  else {
    this.checkForm();
  }
  this.$emit('changeActiveStep', this.activeStep);
},

kind regards

l.