Resize the form to see dropdown on mobile

skrishn commented 4 weeks ago

https://devtopia.esri.com/WebGIS/arcgis-portal-app-templates/issues/9674

Describe the bug The submit and cancel buttons being fixed to the bottom of the form plus the keyboard coming up take up something like 60% of the screen height so there's very little room in the form to see the dropdown.

I have an iPhone 15 pro and I can barely see the input for "First Name" when trying to use it:

It's one of those things that looks fine in mobile mode in the browser but not so much on a phone due to the keyboard taking up 40% of the screen when using an input. The form should take over the entire screen and hide the map on mobile when commenting or using the report form similar to how the filter works, or at least give them the option to do that.

Commenting:

@sumitzarkar Comment from IA dev

"I see what you are saying about it being hidden. Let's do your suggestion of having the form take over the page to prevent this on mobile.."

chris-fox commented 4 weeks ago

@skrishn, can we look into an alternate fix, it seems weird to me to override the calcite-combobox size. If this is a calcite bug we should try to get a repro case outside of the instant app to the calcite team.

skrishn commented 4 weeks ago

@chris-fox I've updated the issue. It's not about calcite.

sumitzarkar commented 3 weeks ago

@chris-fox @skrishn @jmhauck

As discussed on the call here is our approach to improve the UX for this case:

When FeatureForm(create-Feature form and create-comment) UI is shown in the panel, update the code to set the panel with full height.
This requires changes in the reporter component and Instant app.
Currently, from the reporter component, we are emitting an event to toggle the panel, this event is handled in the instant app.
Currently, we are just passing the panel state to this event, now we will pass panel state and the form open state.
Using the form open state the instant app handler needs to be updated to use full height to the panel.

We have implemented this and also updated the sample and we will deliver it in the next code drop

Esri / solutions-components

Resize the form to see dropdown on mobile #671