Popup component properties do not apply to Search result Popups

AntonioMedrano

I'd like to set the docking position (or maybe eventually it'll be called slot) for a search result popup. For any standard feature layer popup using a popup template, this can be done with the following code:

const popupComponent = document.querySelector("arcgis-popup");
popupComponent.dockOptions = {
   buttonEnabled: true,
   position: "bottom-right"
};

Before components, this would also apply toward search popups, but now it doesn't. How can I modify popup parameters on the search result popup, or even add a new action? Thank you.

Noah-Sager

Hi @AntonioMedrano, nice, thanks for the reply. I understand the situation better now. I had to pull in some additional resources (shout-out @ReneRubalcava).

So at 4.34, the Search component still uses the Popup widget. As such, we cannot dock the Popup widget inside the Search component logic. However, at the next release, we expect the Search component to use the Popup component, and then all the problems would be resolved as you thought.

For now, what we can do is actually use the Popup widget and associate it with the map component. Then we tell the Popup to always open in the docked position. Now, the Search component will open a docked Popup widget. Example: https://codepen.io/noash/pen/WbrJGaY?editors=1000

However, if you want to go one step further, you can have both the Popup widget and the Popup component. This way the Search popups will be docked, but any clicked feature on the map will open the Popup component, and behave as expected (e.g. not docked): https://codepen.io/noash/pen/ogbdzVZ?editors=1000

Note, this is a 4.34 solution. I would advise you to revert this workflow and use the Search component and Popup component after we enhance them. Hope this helps!

View solution in original post

Noah-Sager

Hi @AntonioMedrano, thanks for posting your question here. We recently released the Popup component in beta: https://developers.arcgis.com/javascript/latest/release-notes/#popup-component-beta, so you might see some differences compared with working with the Popup widget.

However, if you're working with the Popup and the Search widget/component, maybe I can help. The Search component still uses the Popup widget. Can you describe a bit more about what you are trying to do? If you have a simplified repro app that works at 4.33, I'd be happy to take a look.

AntonioMedrano

Yes, my above code snippet is for working with the Popup component. The Search component has no way to define dockOptions though, by default the Search component has the dock button enabled, but it will only dock on the top-right corner when you press it. There does not seem a way to access the dockOptions on a Search widget/component popup result.

Perhaps if you can show me how to get the Search component popup to dock on the lower right in the Search Component Sample Code, that would be great.

This is also probably why I can't add my own Action buttons to Search component related popup windows. I can change dock position and add action buttons to Popup component popups, but not to Search component popups. Thanks for your reply, I think once Search component incorporates the Popup component instead of the Popup widget this will resolve these problems.

Noah-Sager

Hi @AntonioMedrano, nice, thanks for the reply. I understand the situation better now. I had to pull in some additional resources (shout-out @ReneRubalcava).

So at 4.34, the Search component still uses the Popup widget. As such, we cannot dock the Popup widget inside the Search component logic. However, at the next release, we expect the Search component to use the Popup component, and then all the problems would be resolved as you thought.

For now, what we can do is actually use the Popup widget and associate it with the map component. Then we tell the Popup to always open in the docked position. Now, the Search component will open a docked Popup widget. Example: https://codepen.io/noash/pen/WbrJGaY?editors=1000

However, if you want to go one step further, you can have both the Popup widget and the Popup component. This way the Search popups will be docked, but any clicked feature on the map will open the Popup component, and behave as expected (e.g. not docked): https://codepen.io/noash/pen/ogbdzVZ?editors=1000

Note, this is a 4.34 solution. I would advise you to revert this workflow and use the Search component and Popup component after we enhance them. Hope this helps!

JonathanDawe_BAS

Hi @Noah-Sager , one thing I have noticed about the new popup behaviour is that the changes in the internal dom structure now means that the popup appears below slotted content. Unfortunately this means that docked results from searches now get covered up by any user interface components.

e.g.

Frustratingly there is no way now to actually handle the z-order conflict because the slotted content and rest of the view content sit in separate stacking contexts...

At the moment this has made docked search result content effectively unusable in our application with 4.34.

JonathanDawe_BAS

This sample shows the issue. Search for "Booker", see the the popup underneath the search, then click the feature and see it sitting above.

https://codepen.io/JDawe/pen/EaPLRVy

Noah-Sager

Hi @JonathanDawe_BAS, thanks for also posting your question here. What you are seeing with the Popup behavior is by-design (shout-out @LaurenBoyd). The Popup component should always be top-most in the UI. When using a Map component, the Popup widget will display below the component(s). When we talk about the Popup widget with a Map (not a Map component), then we see the same behavior where the Popup widget should always be top-most in the UI. Example:

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=popup-docking-position

So mixing the Popup widget and Popup component is a little confusing, but the new Popup component behavior matches our design and our previous Popup widget behavior.

JonathanDawe_BAS

Thanks @Noah-Sager, I agree the pop up should always sit above the other ui elements. The issue I was pointing out was that at 4.34 this behaviour is now not true for the pop ups from a search component / any default pop ups. Previously In version 4.33 it did sit above the ui, meaning effectively there is a regression in behaviour when using the popup, as there is no way of making it use the new popup component to sit correctly in the z order.

I’m confused as to why it doesn’t just put the popup into the popup slot?

Noah-Sager

Yes, @JonathanDawe_BAS, the issue you pointed out is not ideal. The transition will still take us some time.

For workarounds, is there any edge / position of the screen that you can place the docked Popup for 4.34?

AntonioMedrano

Thank you @Noah-Sager and @ReneRubalcava, these are excellent examples showing how to associate a dockOption to standard popups and/or search component popups. So if I'm getting this right for v4.34, in addition to the Search component, also the standard non-search popup associated with the feature layer is still using the popup widget. Only when you import the Popup component, then the standard non-search popup gets replaced with the Popup component version. Is that the right way to think about it?

The complete transition to components is long and full of complexities, but I appreciate you taking the time to explain these quirks that I'm finding as we move towards making the full conversion.