Can I create a widget that doesn't register a click on its' background?

[Woodpeckerus]

I have a custom widget that I need to be overlaid over the entire Map View widget. Let's say the widget will have a button in the corner that needs to respond to clicks. At the same time, I don't want the background of the widget (everything except that button) to register any clicks or mouse events so I can still interact with Map View. 

Is it possible to achieve this? 

Basic example would look something like this: 

[RoderickPerendy]

I may be wrong here but if you make the widget the entire size of Map Widget, its DOM will overlay so when you "click" on the map it's only really clicking on the widget. What I would do instead is make the Widget as small as you need it (the size of a button). Then on the map widget using the jimumapview make a function that listens to click events on the map and push whatever data you want to your widget. You're going to need to properly setup your Settings.tsx that accepts a map datasource. Look at the ESRI coordinate widget for help on this. 

I made a weather widget that grabs the location with a click on a map passes it to a weather API and renders some charts with the return data. 

[Woodpeckerus]

Thanks for the input @RoderickPerendy 

That weather widget is pretty similar to what I'm going for. The only difference I suppose is that I want to render some html on top of the map itself. I basically need a functionality similar to a popup. Click on a map, then display html table with some information close to the mouse click. 

I have a function that renders that html table with it's data. Can I pass that through JimuMapView in order to render it on top of the map? Or would I need to customise the actual Map Widget from esri in order to do that? 

[JeffreyThompson2]

Have you looked at all the options in the popupTemplate? You could certainly make an html table that renders in a popup. 

[RoderickPerendy]

Well multiple ways to go about it. So essentially you want a popup like in AGOL map viewer? The Jimumapview class holds pretty much everything you need. If you need to display data from a data source within the map you will probably need the data source manager. 

You will probably need some props to store the latest click state like where on the dom the click occurred, and a Boolean variable. Basically when a user clicks on the map it understands where the click occurred and then sets the Boolean to true. In the render portion of your script have the popup widget only show when the Boolean is true and set his style based on where it needs to be. Last you’ll need to be able to close out the widget or reset its state so the next mouse click say that is outside the popup window will set the state back to false.

[RoderickPerendy]

Sorry I mean using the jimumapview in your custom widget, not the map widget. Apologize for the confusion.

[JeffreyThompson2]

@RoderickPerendy is correct that whatever widget is on top will be the one to register the click. Most likely whatever you are trying to do would be best accomplished by using features from the Javascript API, as he suggests.

If you want to do something different, like putting a text box over the map that stay stationary while the map moves under it, you may be able to do it by using relative positioning in the css.