map.flyTo(...) doesn't fly to given centroid when triggered inside map.on('click') with map.setMinZoom & map.setMaxZoom

[Nuhasami]

I want to start by appreciating this community and the hard work put into mapbox-gl-js. 🙌

mapbox-gl-js version: ^3.2.0

browser: Chrome Version 122.0.6261.128

Steps to Trigger Behavior

1. set minZoom and maxZoom to map
2. add image
3. add click event to map using map.on('click', layerId, clickHandler)
4. in clickHandler setMinZoom & maxZoom to different values, then flyTo centroid with a zoom level that's between the zoom values you just set.

You'll notice it doesn't fly to the given centroid. Kindly note that this behavior isn't consistent; as sometimes it might work, however most of the time it doesn't. In the demo provided, it takes multiple clicks to trigger the bug, but in my app, the bug is the default behavior. I should also mention that it works perfectly fine when flyTo isn't triggered by map.on('click'). Meaning, having a button with a classic onClick function that will execute flyTo (same exact function used in map.on('click)), everything works perfectly. I should also mention that this behavior only surfaced after updating mapbox-gl version to 3.2.0, the previous version I had 2.1 was working perfectly fine.

Link to Demonstration

demo to bug

Expected Behavior

flyTo given centroid with given zoom level

Actual Behavior

feels like flyTo stops at a random centroid with a random zoom level