How to update calcite-stepper-content

[GregoryBologna]

I am setting the content on demand, but the content in calcite-stepper-content appears to update and then immediately becomes empty.

<div class="calcite-stepper-content"></div>

function goToBufferStep(event) {
	let stepper = document.getElementById('pao-stepper');
	if (stepper) {
		let target = event.currentTarget;
		let i = target.getAttribute('data-step');
		let content = document.querySelector('.calcite-stepper-content');
		if (content) {
			stepper.goToStep(i);
			stepper.nextStep()
				.then(
				updateCalciteStepperContent(`step-${i}`)
				);
		}
	}
}

updateCalciteStepperContent function ...

let content = document.querySelector('.calcite-stepper-content');
if (content)
  content.innerHTML = 'blah';

[BenElan]

Hi @GregoryBologna, I am not able to reproduce this issue - https://codepen.io/benesri/pen/JjpVPzK?editors=1010

Can you please provide a codepen that does reproduce the issue?

[GregoryBologna]

Hi Ben. This is pretty much the same code I have in my app. It is working in the pen, but not in the app. See the screenshots. The calcite-stepper-content is not updating in my app like it does in the pen.

https://codepen.io/capegreg/pen/vYdMYwv?editors=1010

[BenElan · Accepted solution]

Hmm, there must be something else going on in the app that was not ported over to the codepen. If you're able to get the codepen to reproduce the issue, I'd be happy to take a look.

[GregoryBologna]

Great. I will let you know when it’s up. Meanwhile, I’ll accept your answer here.