Expand Component: Blocking All Interaction

D_Atkins

I always like to start with a question, so, "maybe I'm just missing something"?

Minimum working example:
https://codepen.io/Dane-Atkins/pen/WbGwOLb

Pretty basic map so far, with a bit of a space for user interactions.  However, if you open the page on a mobile device, the Expand components will 'dock' to the bottom of the map (not a problem itself), but this docking also blocks all user interactions / Javascript (not okay)!

(You can simulate the narrow view on a desktop, but you may have to open the Developer Tools to get the window narrow enough to trigger the docking behavior.)

Bonus Points: if both the Legend and the Search Expands are 'expanded' (as the default MWE shows), then the window is shrinks (or loads, i.e., mobile) then the blocking behavior prevents either Expand from closing!

----------------

We can, of course, remove the Expands and just use the Legend component directly.  But for the Search bar specifically, this behavior is breaking for our mobile users, where the Expand makes the most sense!

AnneFitz

Hi - thanks for your feedback! This is currently by design, as the Expand component uses the Calcite sheet under the hood when in mobile mode (or "drawer" mode on the component).

To avoid this behavior, you could set the Expand's "mode" property to "floating", which will keep the Popover behavior at all view sizes, even mobile. I've updated your codepen example to use that instead. https://codepen.io/annefitz/pen/JoRKPEg?editors=1010

We are aware that the page blocking behavior coming from the Calcite Sheet is not ideal in some scenarios with the Expand component. We will look into improving this in the future! Thank you.