Adjust Widget Position from Controller in React

[jwilner_amica]

Currently, I am trying to change the default position that a widget deploys in from the widget controller. Normally, a widget will appear above the controller (controller positioned at the bottom of the screen). I would like my widget to appear in the top left. I've written this code, which definitely does not seem to be the intended way, and does not quite work:

export default function (props: AllWidgetProps<IMConfig>) {

  useEffect(() => {

        const elements = document.querySelectorAll('[aria-label="'+props.label+'"]');

        elements[1].style.transform = 'translate(0px,0px)'

    }, [])

...

}

This code does position the widget, but when repositioned with the cursor (drag/drop), the widget snaps back to the default position (above the widget controller). Additionally, the only way I could seem to access the widget itself (rather than the controller icon) was through its aria label, which is not ideal. It seems to be something about manipulating the CSS of a Popper element directly creating the issue?

Any help would be much appreciated, thank you!

[DavidSolari]

Trying to override React's layout system with the useEffect hook is a very bad idea, React has no idea you're moving the widget around the DOM so it'll constantly try to snap it back to its stored position. It seems like you're trying to pet the dog backwards here, if you create a custom widget controller that has position overrides you'll get something that works for any widget and allows your widget to be used outside of a controller.

If you absolutely must do this through the widget itself, try looking into the useRef hook to capture the appropriate chunk of the DOM, then override any events that can reposition the widget.

[jwilner_amica]

Yeah, I guess editing the controller would be the most effective way to get it done. I was hoping there was some way to avoid it, since Esri's code is not the easiest read. I'll go through and see if I find anything of note. Thank you for your help.

[JeffreyThompson2]

As @DavidSolari said, trying to directly manipulate the DOM in React rarely works out well. And the Widget Controller is higher up in the React tree, so it will always keep trying to put the widget back.

I know that being able to set the location of a floating widget is something the Dev team wanted to do, but who knows when it will be released or if they are still working on it.

Here are your current options:

1. Use the Fixed Panel option in the Widget Controller.
2. Fake a Widget Controller with a Section Widget.
3. Modify the Widget Controller. (Keep in mind that the Dev team have worked on this and apparently not figured it out.)

[jwilner_amica]

After some attempts at 3, your note in parentheses is hitting home. I am thinking fixed panel may be best for now. It would be great if there was any way to allow the user to resize the window once it has been deployed to the panel. Real shot in the dark, but is there a way to do that? Really hope the development team can figure out a solution to this. I appreciate your help.

[jwilner_amica]

I suppose if section allowed for resize after creation, that would work too, but certainly less ideal (and I would guess, less likely).