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, 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!